<template>
  <div class="nav-first-container" id="appro-info" v-show="loading">
    <!-- work.type == 1 已撤销  types ==0 代表不用审批了-->
    <div :class="isMy && status.pertype!=5?'bg-grey padding-b-54':work.type != '1' && types != '0'?'bg-grey padding-b-54':'bg-grey'" >
      
        <div class="head-info">
          <van-row>
            <van-col :span="4" @click="checkIdCard(work.uid)">
              <template v-if="work.pic">
                <van-image radius="4px" class="all-head-img" :src="`${$common.filePath}${work.pic}`"/>
              </template>
              <template v-else>
                <img class="all-head-img" src="../../assets/notification/head.png">
              </template>
            </van-col>
            <van-col :span="18" class="head-right margin-l-15">
              <p class="head-title van-multi-ellipsis--l2">{{work.name}}-{{work.tpltitle}}</p>
              <p class="head-desc van-ellipsis flex-row">
                <span>发起时间：{{work.date}}</span>
                <span class="font-color">{{work.type == "1"?'已撤销':''}}</span>
              </p>
            </van-col>
          </van-row>
        </div>
        <div class="form-detail-class">
          <!-- 步骤时1时显示 -->
          <template v-if="currentStep == '1'">
            <!-- <van-cell-group :border="false" class="padding-tb-10 ">
            <van-cell title="标题" :value="work.title" title-class="cell-left" value-class="cell-right" />
            </van-cell-group> -->
            <van-cell-group :border="false" class="padding-tb-10 ">
              <van-cell title="流水号" :value="work.number" title-class="cell-left" value-class="cell-right" />
            </van-cell-group>
            <van-cell-group v-for="(formItem, formIndex) in stepForm" :key="formIndex" :border="false" class="padding-tb-10 ">
              <!-- 附件 -->
              <template v-if="formItem.inputtype == '2'">
                <van-cell :title="formItem.fromname" title-class="cell-left" value-class="cell-right" >
                  <template slot="default">
                    <div v-if="formItem.inputvalue" v-for="(file,index) in formItem.inputvalue" class="form-file" :key="index" @click="previewFile(file)">
                      <img class="img-class" :src="$common.fileIcon(fileName(file, 'type'))">
                      <p class="van-ellipsis form-file-name van-ellipsis">
                        {{ fileName(file, 'fullName') }}
                      </p>
                    </div>
                  </template>
                </van-cell>
              </template>
              <!-- 图片 -->
              <template v-else-if="formItem.inputtype == '1'">
                <van-cell :title="formItem.fromname" title-class="cell-left" value-class="cell-right">
                  <template slot="default" v-if="formItem.inputvalue && formItem.inputvalue.length <= 3">
                    <div class="form-file">
                      <img v-for="(img,j) in formItem.inputvalue" :key="j" class="form-img" :src="`${$common.filePath}${img}`" @click="imgPreview(formItem.inputvalue,j)">
                    </div>
                  </template>
                  <template slot="default" v-if="formItem.inputvalue && formItem.inputvalue.length > 3">
                    <div class="form-file" >
                      <img class="form-img" :src="`${$common.filePath}${formItem.inputvalue[0]}`"
                      @click="imgPreview(formItem.inputvalue,0)">
                      <img class="form-img" :src="`${$common.filePath}${formItem.inputvalue[1]}`"
                      @click="imgPreview(formItem.inputvalue,1)">
                      <img class="form-img" :src="`${$common.filePath}${formItem.inputvalue[2]}`"
                      @click="imgPreview(formItem.inputvalue,2)">
                      <img class="form-img" :src="`${$common.filePath}${formItem.inputvalue[3]}`">
                      <div class="form-img-mask" @click="imgPreview(formItem.inputvalue,3)">
                      +{{formItem.inputvalue.length - 4}}</div>
                    </div>
                  </template>
                </van-cell>
              </template>
              <!-- 关联表单 -->
              <template v-else-if="formItem.inputtype == '8'">
                <van-cell :title="formItem.fromname" title-class="cell-left" value-class="cell-right">
                  <template slot="default">
                    <div v-for="(item, k) in formItem.inputvalue" :key="k">
                      <p class="close-form" @click="closeFormClick(item)">{{item.title}}</p>
                    </div>
                  </template>
                </van-cell>
              </template>
              <!-- 假期类型 -->
              <template v-else-if="formItem.inputtype == '9'">
                <van-cell :title="formItem.fromname" :value="$common.returnVacationName(formItem.inputvalue)" title-class="cell-left" value-class="cell-right" />
              </template>
              <!-- 其余 -->
              <template v-else>
                <van-cell :title="formItem.fromname" :value="formItem.inputvalue" title-class="cell-left" value-class="cell-right" />
              </template>
            </van-cell-group>
            <van-cell-group>
              <!-- tplid 8994专属 -->
              <template v-if="tplData.tplid == '8994'">
                <van-cell title="公章使用审批权限" title-class="cell-left" value-class="cell-right" >
                  <van-image width="100" height="100" src="http://221.13.83.4:2180/app/img/gzsy.png" @click="previewImg('http://221.13.83.4:2180/app/img/gzsy.png')"/>
                </van-cell>
              </template>
            </van-cell-group>
            
            
            <!-- 表格(附带金额计算 行统计等) -->
            <template v-if="tableData" v-for="(table, tableIndex) in tableData">
              <div class="table-wrap">
                <div class="table-col" v-for="(col, colIndex) in table.table">
                  <label class="table-header van-ellipsis">{{ col.fromname }}</label>
                  <div class="table-input-wrap" v-for="(colItem, colItemIndex) in col.inputvalue"> 
                    <template>
                      <input v-if="col.product != '1'" disabled="disabled" type="text" v-model="col.inputvalue[colItemIndex]" >
                      <input v-else disabled="disabled" type="number" pattern="\d*" v-model="col.inputvalue[colItemIndex]">
                    </template>
                  </div>
                </div>
              </div>
              <div class="total-calc" v-if="table.dbtype == '3'">总金额: {{ returnTotal(table) }}</div>
            </template>
          </template>
          <!-- 步骤不为1时显示数据 -->
          <template v-else>
            <div v-if="this.editFlag == 1">
              <forms ref="forms" :form="stepForm" :table="tableData" :workObject="work"></forms>
            </div>
            <div v-else>
              <!-- <van-cell-group :border="false" class="padding-tb-10 ">
                <van-cell title="标题" :value="work.title" title-class="cell-left" value-class="cell-right" />
              </van-cell-group> -->
              <van-cell-group :border="false" class="padding-tb-10 ">
                <van-cell title="流水号" :value="work.number" title-class="cell-left" value-class="cell-right" />
              </van-cell-group>
              <van-cell-group v-for="(formItem, formIndex) in form" :key="formIndex" :border="false"class="padding-tb-10">
                <!-- 附件 -->
                <template v-if="formItem.inputtype == '2'">
                  <van-cell :title="formItem.fromname" title-class="cell-left" value-class="cell-right" >
                    <template slot="default">
                      <div v-if="formItem.inputvalue" v-for="(file,index) in formItem.inputvalue" class="form-file" :key="index" @click="previewFile(file)">
                        <img class="img-class" :src="$common.fileIcon(fileName(file, 'type'))">
                        <p class="van-ellipsis form-file-name van-ellipsis">
                          {{ fileName(file, 'fullName') }}
                        </p>
                      </div>
                    </template>
                  </van-cell>
                </template>
                <!-- 图片 -->
                <template v-else-if="formItem.inputtype == '1'">
                  <van-cell :title="formItem.fromname" title-class="cell-left" value-class="cell-right">
                    <template slot="default" v-if="formItem.inputvalue && formItem.inputvalue.length <= 3">
                      <div class="form-file">
                        <img v-for="(img,j) in formItem.inputvalue" :key="j" class="form-img" :src="`${$common.filePath}${img}`" @click="imgPreview(formItem.inputvalue,j)">
                      </div>
                    </template>
                    <template slot="default" v-if="formItem.inputvalue && formItem.inputvalue.length > 3">
                      <div class="form-file" >
                        <img class="form-img" :src="`${$common.filePath}${formItem.inputvalue[0]}`"
                        @click="imgPreview(formItem.inputvalue,0)">
                        <img class="form-img" :src="`${$common.filePath}${formItem.inputvalue[1]}`"
                        @click="imgPreview(formItem.inputvalue,1)">
                        <img class="form-img" :src="`${$common.filePath}${formItem.inputvalue[2]}`"
                        @click="imgPreview(formItem.inputvalue,2)">
                        <img class="form-img" :src="`${$common.filePath}${formItem.inputvalue[3]}`">
                        <div class="form-img-mask" @click="imgPreview(formItem.inputvalue,3)">
                        +{{formItem.inputvalue.length - 4}}</div>
                      </div>
                    </template>
                  </van-cell>
                </template>
                <!-- 关联表单 -->
                <template v-else-if="formItem.inputtype == '8'">
                  <van-cell :title="formItem.fromname" title-class="cell-left" value-class="cell-right">
                    <template slot="default">
                      <div v-for="(item, k) in formItem.inputvalue" :key="k">
                        <p class="close-form" @click="closeFormClick(item)">{{item.title}}</p>
                      </div>
                    </template>
                  </van-cell>
                </template>
                <!-- 假期类型 -->
                <template v-else-if="formItem.inputtype == '9'">
                  <van-cell :title="formItem.fromname" :value="$common.returnVacationName(formItem.inputvalue)" title-class="cell-left" value-class="cell-right" />
                </template>
                <!-- 其余 -->
                <template v-else>
                  <van-cell :title="formItem.fromname" :value="formItem.inputvalue" title-class="cell-left" value-class="cell-right" />
                </template>
              </van-cell-group>
              <van-cell-group>
                <!-- tplid 8994专属 -->
                <template v-if="tplData.tplid == '8994'">
                  <van-cell title="公章使用审批权限" title-class="cell-left" value-class="cell-right" >
                    <van-image width="100" height="100" src="http://221.13.83.4:2180/app/img/gzsy.png" @click="previewImg('http://221.13.83.4:2180/app/img/gzsy.png')"/>
                  </van-cell>
                </template>
              </van-cell-group>
            
            <!-- 表格(附带金额计算 行统计等) -->
            <template v-if="tableData" v-for="(table, tableIndex) in tableData">
              <div class="table-wrap">
                <div class="table-col" v-for="(col, colIndex) in table.table">
                  <label class="table-header van-ellipsis">{{ col.fromname }}</label>
                  <div class="table-input-wrap" v-for="(colItem, colItemIndex) in col.inputvalue"> 
                    <template>
                      <input v-if="col.product != '1'" disabled="disabled" v-model="col.inputvalue[colItemIndex]">
                      <input v-else disabled="disabled" v-model="col.inputvalue[colItemIndex]" pattern="\d*">
                    </template>
                  </div>
                </div>
              </div>
              <div class="total-calc" v-if="table.dbtype == '3'">总金额: {{ returnTotal(table) }}</div>
            </template>
            <!-- <p class="progress">明细表</p>
            <div v-for="(table, tableIndex) in tableData" :key="tableIndex">
              <div v-for="(grid, indexs) in table.table" :key="indexs">
                <van-panel v-for="(col, indexs) in grid.inputvalue" :key="'col'+indexs" class="margin-b-10">
                  <div slot="header"></div>
                  <div slot="default">
                    <van-cell :title="grid.fromname" :value="col" title-class="cell-left" value-class="cell-right" :border="false"/>
                  </div>
                </van-panel>
              </div>
            </div> -->
            </div>
          </template>
        </div>

        <!-- 表单附件 -->
        <template v-if="formfiles && formfiles.length > 0">
          <p class="progress">表单附件</p>
          <div class="attachment-class">
            <div class="form_file_div" v-for="(item, index) in formfiles" :key="`表单附件${index}`">
              <p class="form_file">{{item.form_name}}</p>
              <div v-for="(file, index) in item.files" :key="`表单${index}`" @click.stop="previewComFile(file.fileaddr,file.filename)" >
                <p class="file-flex margin-b-10 margin-t-10">
                  <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                  <span class="step-width van-ellipsis">{{file.filename}}</span>
                </p>
              </div>
            </div>
          </div>
        </template>

        <!-- 流程附件 -->
        <template v-if="attachmentShow">
          <p class="progress">流程附件</p>
          <div class="attachment-class" v-for="(res, resindex) in result" :key="resindex" v-if="resindex == 0">
            <template v-if="res.file.length > 0">
              <p v-for="(att, attIndex) in res.file" :key="attIndex" @click.stop="previewComFile(att.fileaddr,att.filename)" class="form-file m10">
                <img class="step-img" :src="$common.fileIcon(fileName(att.fileaddr, 'type'))">
                <span class="step-width van-ellipsis">{{att.filename}}</span>
              </p>
            </template>
            <template v-else>
              <p style="font-size: 14px;color: #333333;">没有附件！</p>
            </template>
          </div>
        </template>

        <van-cell-group class="group-class margin-b-12">
          
          <!-- 会签人显示 -->
          <template v-if="status.actf && status.actf.length > 0">
            <p class="progress">已有会签人</p>
            <van-cell-group class="approval-class">
              <van-cell v-for="(item,index) in status.actf" :key="`${index}会签`" :title="item.name" :value="getTypename(item.pertype)" :value-class="item.pertype == '1'?'pass-color':''"/>
            </van-cell-group>
          </template>

          <p class="progress">流程办理进度</p>
          <div class="steps-container">
            <div class="steps" v-for="(res, index) in result" :key="`${index}流程`">
              <!-- <div :class="(res.pertype == '0' || res.pertype == '4')?'step-circle':'step-circle circle-active'">{{res.list.flownum}}</div> -->
              <!-- 单人头像 -->
              <template v-if="res.appkey == '2'">
                <div class="flow-img" @click="checkIdCard(res.entrustid?res.entrustid:res.uid)">
                  <template v-if="res.pic">
                    <van-image class="process-border-img" radius="4px" :src="`${$common.filePath}${res.pic}`"/>
                  </template>
                  <template v-else>
                     <img class="process-img" src="../../assets/notification/head.png">
                  </template>
                </div>
              </template>
              <!-- 多人审批 头像 -->
              <template v-if="res.appkey == '1'">
                <div class="flow-img">
                  <img class="process-img" src="../../assets/notification/head-group.png">
                </div>
              </template>
              <div class="step-line"></div>
              <div class="step-right">
                <!-- 单人审批 -->
                <template v-if="res.query.length <= 0">
                  <h3 class="step-title-class">
                    <van-col :span="17">
                      <span class="van-multi-ellipsis--l3">
                        {{res.list.flowname}}{{'(主办：'+ res.name }}
                        <!-- {{!!res.actf_name?'；会签：' + res.actf_name:''}} -->
                        {{!!res.entrust?'；委托：'+res.entrust +')' : ')'}}
                      </span>
                    </van-col>
                    <van-col :span="7" class="align-right">
                      <span :class="getTypeclass(res.pertype)">{{getTypename(res.pertype)}}</span>
                    </van-col>
                  </h3>
                  <!-- 单人审批 会签 -->
                  <div v-for="(actf,index) in res.actf" :key="`${index}单会签`" class="margin-t-15">
                    <h4 class="step-title-class">
                      <van-col :span="17">
                        <span class="van-multi-ellipsis--l2 normal-flex">
                          <van-tag plain color="#F5A703" class="margin-r-10">会签人</van-tag>{{ actf.name }}
                        </span>
                      </van-col>
                      <van-col :span="7" class="align-right">
                        <span :class="getTypeclass(actf.pertype)">{{getTypename(actf.pertype)}}</span>
                      </van-col>
                    </h4>
                    <p class="step-time-class">{{actf.approvaldate}}</p>
                    <div class="step-container y">
                      <p v-if="actf.pertype != '0' && actf.lnstructions" >{{actf.lnstructions}}</p>
                      <p class="step-file" v-if="actf.file.length > 0" v-for="(file,inindex) in actf.file" :key="inindex" @click="previewComFile(file.fileaddr,file.filename)">
                        <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                        <span class="step-width van-ellipsis">{{ file.filename }}</span>
                      </p>
                    </div>
                  </div>
                  <!-- 主办和委托是互斥关系，有主办就显示，有委托就不显示主办 -->
                  <template v-if="!res.entrust">
                    <div v-if="res.actf && res.actf.length > 0" class="margin-t-15">
                      <h4 class="step-title-class ">
                        <van-col :span="17">
                          <span class="van-multi-ellipsis--l2 normal-flex">
                            {{ res.name }}
                          </span>
                        </van-col>
                        <van-col :span="7" class="align-right">
                          <span :class="getTypeclass(res.pertype)">{{getTypename(res.pertype)}}</span>
                        </van-col>
                      </h4>
                    </div>
                  </template>
                  <template v-else>
                    <div v-if="res.actf && res.actf.length > 0" class="margin-t-15">
                      <h4 class="step-title-class ">
                        <van-col :span="17">
                          <span class="van-multi-ellipsis--l2 normal-flex">
                            <van-tag plain color="#F5A703" class="margin-r-10">委托</van-tag>{{ res.entrust }}
                          </span>
                        </van-col>
                        <van-col :span="7" class="align-right ">
                          <span :class="getTypeclass(res.pertype)">{{getTypename(res.pertype)}}</span>
                        </van-col>
                      </h4>
                    </div>
                  </template>
                  <p class="step-time-class">{{res.approvaldate}}</p>
                  <div class="step-container">
                    <p v-if="res.pertype != '0' && res.lnstructions">{{res.lnstructions}}</p>
                    <!-- 第一步的附件显示在公共附件区，这里不显示 -->
                    <p class="step-file" v-if="res.file.length > 0 && index > 0"  v-for="(file,fileindex) in res.file" :key="fileindex" @click="previewComFile(file.fileaddr,file.filename)">
                      <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                      <span class="step-width van-ellipsis">{{file.filename}}</span>
                    </p>
                  </div>
                </template>
                <!-- 多人审批 -->
                <template v-else>
                  <h3 class="step-title-class">
                    <van-col :span="17">
                      <span class="van-multi-ellipsis--l3">
                        {{res.list.flowname}}{{'(主办：'+ res.name }}
                        <!-- {{!!res.actf_name?'；会签：' + res.actf_name : ''}} -->
                        {{!!res.entrust?'；委托：'+res.entrust +')' : ')'}}
                      </span>
                    </van-col>
                    <van-col :span="7" class="align-right">
                      <span :class="getTypeclass(res.pertype)">{{getTypename(res.pertype)}}</span>
                    </van-col>
                  </h3>
                  <!-- 会签 -->
                  <div v-for="(actf,index) in res.actf" :key="`${index}多会签`" class="margin-t-15">
                    <h4 class="step-title-class">
                      <van-col :span="17">
                        <span class="van-multi-ellipsis--l2 normal-flex">
                          <van-tag plain color="#F5A703" class="margin-r-10">会签人</van-tag>{{ actf.name }}
                        </span>
                      </van-col>
                      <van-col :span="7" class="align-right">
                        <span :class="getTypeclass(actf.pertype)">{{getTypename(actf.pertype)}}</span>
                      </van-col>
                    </h4>
                    <p class="step-time-class">{{actf.approvaldate}}</p>
                    <div class="step-container" >
                      <p v-if="actf.pertype != '0' && actf.lnstructions">{{actf.lnstructions}}</p>
                      <p class="step-file" v-if="actf.file.length > 0" v-for="(file,index) in actf.file" :key="`${index}会签附件`" @click="previewComFile(file.fileaddr,file.filename)">
                        <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                        <span class="step-width van-ellipsis">{{file.filename}}</span>
                      </p>
                    </div>
                  </div>
                  <!-- 多人主办 -->
                  <div v-for="(query,index) in res.query" :key="`${index}多人`">
                    <h4 class="step-title-class">
                      <van-col :span="17">
                        <span class="van-multi-ellipsis--l2">
                          {{ query.name }}
                        </span>
                      </van-col>
                      <van-col :span="7" class="align-right">
                        <span :class="getTypeclass(query.pertype)">{{getTypename(query.pertype)}}</span>
                      </van-col>
                    </h4>
                    <p class="step-time-class">{{query.approvaldate}}</p>
                    <div class="step-container" >
                      <p v-if="query.pertype != '0' && query.lnstructions">{{query.lnstructions}}</p>
                      <p class="step-file" v-if="query.file.length > 0" v-for="(file,inindex) in query.file" :key="inindex" @click="previewComFile(file.fileaddr,file.filename)">
                        <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                        <span class="step-width van-ellipsis">{{ file.filename }}</span>
                      </p>
                    </div>
                  </div>
                  <!-- 公共附件 -->
                  <!-- <div class="step-container s" v-if="res.file.length > 0">
                    <p class="step-file" :class="res.file.length > 0?'file-t-10':''" v-if="res.file.length > 0 && index > 0" v-for="(file,inindex) in res.file" :key="inindex" @click="previewComFile(file.fileaddr,file.filename)">
                      <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                      <span class="step-width van-ellipsis">{{ file.filename }}</span>
                    </p>
                  </div> -->
                </template>
              </div>
            </div>
            <!-- 遍历的是 待办流程进度数据 -->
            <!-- <div class="steps" v-for="(done, index) in remain_done" :key="`${index}done`">
              <div class="flow-img">
                <template v-if="done.pic">
                  <van-image class="process-border-img" radius="4px" :src="`${$common.filePath}${done.pic}`"/>
                </template>
                <template v-else>
                   <img class="process-img" src="../../assets/notification/head.png">
                </template>
              </div>
              <div class="step-line"></div>
              <div class="step-right">
                <h3 class="step-title-class">
                  <van-col :span="18">
                    <span class=" van-multi-ellipsis--l3">
                      {{done.flowname}}
                      <template v-if="done.flowuser">
                        {{'(主办：'+ done.flowuser + ')'}}
                      </template>
                    </span>
                  </van-col>
                  <van-col :span="7" class="align-right">
                    <span style="color: #C4C4C4;">待办</span>
                  </van-col>
                </h3>
              </div>
            </div> -->
          </div>
        </van-cell-group>
      
      <!-- close 用来判断是否是关联表单进来的  就只能查看 没有任何按钮可操作 -->
      <template v-if="!$route.query.close && $route.query.close != 'close'">
        <!-- work.type == 1 已撤销 -->
        <template v-if="work.type != 1">
          <div :class="status.pertype == 5?'':'edit-bottom-btns'">
            <!-- types == 0 不用审批 -->
            <template v-if="types == '0'">
              <!-- ismy 为true 并且没有结束  就可以撤销 -->
              <template v-if="isMy && status.pertype != 5">
                <van-col :span="status.pertype != '2'?11:11" >
                  <van-button type="default" size="large"
                  @click="revocation">撤销</van-button>
                </van-col>
                <template v-if="status.pertype != '2'">
                  <van-col :span="11" offset="2">
                    <van-button type="default" size="large" style="color: #2E79FF;"
                    @click="reminder()">催办</van-button>
                  </van-col>
                </template>
                <!-- status.pertype == 2 代表拒绝 -->
                <template v-if="status.pertype == '2'">
                  <van-col :span="12" :offset="1">
                    <van-button type="primary" size="large" calss="info-btn-calss" 
                    @click="againSubmit">重新提交</van-button>
                  </van-col>
                </template>
              </template>
            </template>

            <template v-if="types != '0'">
              <!-- actf_type == 1 是会签人办理 -->
              <template v-if="actf_type == '1'">
                <van-row type="flex" justify="space-between">
                  <!-- <van-button type="default" size="large" @click="clickDisAgree(2,'actf')">拒绝</van-button> -->
                  <van-button type="info" size="large" calss="info-btn-calss" 
                    @click="clickAgree(1,'actf')">同意</van-button>
                </van-row>
              </template>
              <!-- 不是会签人 -->
              <template v-else>
                <!-- 第一步时 可以编辑和撤销 -->
              <template v-if="currentStep == '1'">
                <van-col span="7" >
                  <van-button type="default" size="large" class="default-btn-calss" @click="editeForm">去编辑</van-button>
                </van-col>
                <van-col span="8">
                  <van-button type="info" size="large" calss="info-btn-calss" 
                  @click="revocation">撤销</van-button>
                </van-col>
                <van-col span="8" offset="1">
                  <van-button type="warning" size="large" calss="info-btn-calss" 
                  @click="recoverDelete">删除</van-button>
                </van-col>
              </template>
              <!-- 不是第一步时 -->
              <template v-if="currentStep != '1'">
                <!-- 如果是挂起  先取消挂起 -->
                <template v-if="status.hangdate && status.hangdate != '0000-00-00 00:00:00'">
                  <van-col span="24">
                    <van-button type="warning" size="large" calss="info-btn-class" 
                    @click="cancelActe">取消挂起</van-button>
                  </van-col>
                </template>
                <!-- 没有挂起 -->
                <template v-else>
                  <van-col span="5" class="new_bottom_btn" @click="showApprovalType">
                    <img class="btn_icon" src="../../assets/notification/more.png">
                    <span class="span_text">更多</span>
                  </van-col>
                  <van-col span="5" class="new_bottom_btn" @click="clickBack(3)">
                    <img class="btn_icon" src="../../assets/notification/revert.png">
                    <span class="span_text">回退</span>
                  </van-col>
                  <!-- <van-col span="7" class="new_bottom_btn" @click="clickDisAgree(2)">
                    <van-button size="large" type="default" class="new_default_btn">拒绝</van-button>
                  </van-col> -->
                  <van-col span="13" offset="1" class="new_bottom_btn" @click="clickAgree(1)">
                    <van-button size="large" type="info" class="new_info_btn">{{nextCloseTitle}}</van-button>
                  </van-col>
                </template>
              </template>
              </template>
              
            </template>
          </div>
        </template>
      </template>
      
      
      <!-- 图片预览 -->
      <van-image-preview
        v-model="imgShow"
        :images="imgPreviewData"
        :startPosition="position"
      />
      <!-- 办理人员下拉框 -->
      <van-popup v-model="flowShow" position="bottom" :safe-area-inset-bottom="true"
      :close-on-click-overlay="false">
        <van-row class="next-row-class">
          <van-col :span="4" class="row-cancel" @click="flowCancel">取消</van-col>
          <van-col :span="16" class="row-title">办理人员</van-col>
          <van-col :span="4" class="row-confirm" @click="flowConfirm">确定</van-col>
        </van-row>
        <van-search
          v-if="newflowuser.length >= 10"
          v-model="searchValue"
          placeholder="请输入搜索关键词"
          show-action>
          <div slot="action" @click="onSearch">搜索</div>
        </van-search>
        <van-picker ref="peoplePicker" :columns="resultData" />
      </van-popup>

       <!-- 办理人员选择，多选 -->
      <van-popup v-model="flowShowMultiple" position="bottom" :safe-area-inset-bottom="true"
      :close-on-click-overlay="false" class="multiple-user">
        <van-row class="next-row-class">
          <van-col :span="4" class="row-cancel" @click="flowShowMultiple = false">取消</van-col>
          <van-col :span="16" class="row-title">办理人员</van-col>
          <van-col :span="4" class="row-confirm" @click="flowConfirmMultiple">确定</van-col>
        </van-row>
        <div style="padding-top: 53px;padding-bottom:55px;">
          <van-search
            v-if="newflowuser.length >= 10"
              v-model="searchValue"
              placeholder="请输入搜索关键词"
              show-action>
              <div slot="action" @click="onSearch">搜索</div>
          </van-search>
          <van-checkbox-group v-model="multipleResult" @change="multipleChange" 
          ref="userCheckGroup">
            <van-cell-group>
              <van-cell
                v-for="(item, index) in resultData"
                clickable
                :key="item"
                :title="item"
                @click="multipletoggle(index)"
              >
                <van-checkbox slot="right-icon" shape="square" :name="item" ref="checkboxes" />
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </div>
        <!-- 底部按钮 全选，反选 -->
        <van-row class="checkboxes-btn" >
          <van-col span="12">
            <van-button size="large" type="default" @click="toggleAll">反选</van-button>
          </van-col>
          <van-col span="12">
            <van-button size="large" type="info" @click="checkAll">全选</van-button>
          </van-col>
        </van-row>
      </van-popup>

      <!-- 办理人员选择，树状结构 ,所有人员 -->
      <van-popup v-model="flowShowAll" position="bottom" :safe-area-inset-bottom="true"
      :close-on-click-overlay="false" class="multiple-alluser"
      :style="flowChangeTemp.length <= 0?'height: 78vh;':'height: 86vh'">
        <van-row class="next-row-class">
          <van-col :span="4" class="row-cancel" @click="flowShowAll = false">取消</van-col>
          <van-col :span="16" class="row-title">办理人员</van-col>
          <van-col :span="4" class="row-confirm" @click="flowAllConfirm">确定</van-col>
        </van-row>
        <div style="padding-top: 53px;">
          <side-choose v-if="flowShowAll" ref="flowChoose" :items="items" :default.sync="flowShowALLValue"  titleText="选择办理人员" :maxHeight="flowShowMore?'69vh':'62vh'" @changed="onlineFlowChanged"></side-choose>
        </div>
        <div class="bottom-btn-all">
          <!-- 收拢 -->
          <div v-if="flowChangeTemp.length > 0 && !flowShowMore" class="padding-12 font-size14">
            <van-row>
              <van-col span="4" class="font-color6">已选：</van-col>
              <van-col span="18" class="font-color3">
                <van-col span="19" class="van-ellipsis">
                  <span v-for="(sign, index) in flowChangeTemp" :key="'sign'+index" class="more-class">{{sign.name}}</span>
                </van-col>
                <van-col span="5">等<span style="color: #1A76FF">{{flowChangeTemp.length}}</span>人</van-col>
              </van-col>
              <van-col span="2" class="align-right" @click="flowShowMore = true">
                <img src="../../assets/documents/triangle.png" width="10px" height="6px" />
              </van-col>
            </van-row>
          </div>
          <!-- 展开 -->
          <div v-if="flowChangeTemp.length > 0 && flowShowMore" class="padding-15 font-size14">
            <van-row type="flex" justify="space-between">
              <van-col span="4" class="font-color6">已选：</van-col>
              <van-col span="4" class="font-color6 align-right" @click="clearFlow('read')">清空</van-col>
            </van-row>
            <van-row class="margin-t-15" style="display: flex;align-items: flex-end;">
              <van-col span="22">
                <span v-for="(sign, index) in flowChangeTemp" :key="'more'+index" class="more-class">{{sign.name}}</span>
              </van-col>
              <van-col span="2" class="align-right" @click="flowShowMore = false">
                <img src="../../assets/documents/triangle_up.png" width="10px" height="6px" /></van-col>
            </van-row>
          </div>
        </div>
      </van-popup>

      <!-- 催办弹框 -->
      <van-popup v-model="reminderVisiable" position="bottom" :safe-area-inset-bottom="true"
      :close-on-click-overlay="false" class="multiple-user">
        <van-row class="next-row-class">
          <van-col :span="4" class="row-cancel" @click="reminderCancel">取消</van-col>
          <van-col :span="16" class="row-title">催办人员</van-col>
          <van-col :span="4" class="row-confirm" @click="reminderConfirm">确定</van-col>
        </van-row>
        <van-checkbox-group v-model="reminderCheck" style="padding-top: 52px;">
          <van-cell-group>
            <van-cell
              v-for="(item, index) in reminderData"
              clickable
              :key="item"
              :title="item"
              @click="toggle(index)"
            >
              <van-checkbox slot="right-icon" :name="item" ref="remind_checkboxes" />
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </van-popup>

      <!-- 回退弹出框 -->
      <van-popup v-model="backVisiable" position="bottom" round :close-on-click-overlay="false"
        :safe-area-inset-bottom="true" class="van-popup-height">  
        <van-picker show-toolbar title="回退至" :columns="backData" value-key="key"
        @cancel="backCancel" @confirm="backConfirm"/>
      </van-popup>

      <!-- 下一步弹出框 -->
      <van-popup v-model="nextVisiable" position="bottom" round :close-on-click-overlay="false"
        :safe-area-inset-bottom="true" class="van-popup-height">
        <!-- 按钮 -->
        <van-row class="next-row-class next-position-fixed">
          <van-col :span="4" class="row-cancel" @click="nextStepCancel">取消</van-col>
          <van-col :span="16" class="row-title">下一步</van-col>
          <van-col :span="4" class="row-confirm" @click="nextStepBtn">确定</van-col>
        </van-row>
        <!-- <van-cell title="审批类型" title-class="next-left-class">
          <template slot="default">
            <van-radio-group v-model="baseForm.approvalType" class="radio-inline-class">
              <van-radio name="1">通过</van-radio>
              <van-radio name="2">拒绝</van-radio>
            </van-radio-group>
          </template>
        </van-cell> -->
        <van-cell title="下一步流程设定" title-class="next-left-class" value-class="van-ellipsis"  required class="line-class" style="margin-top: 55px;">
        </van-cell>
        <van-radio-group class="next_radio_class" v-model="nextStepValue">
          <van-cell-group>
            <van-cell v-for="(item,index) in nextStepData" :key="item.id" 
            :title="item.key" clickable @click="nextStepConfirm(item)">
              <van-radio slot="right-icon" :name="item.key" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <template v-if="appkeyValue == '0'">
            <van-cell title="办理人员" title-class="next-left-class" value-class="person-right-class" is-link required placeholder="请选择" :value="baseForm.person" @click="showFlowPeople">
          </van-cell>
        </template>
        <template v-else>
          <van-cell value="当前是多人审批，由最后一人选择办理人员"></van-cell>
        </template>
      </van-popup>
      
      <!-- 下一步流程设定de数据 -->
      <van-popup v-model="nextStepVisiable" position="bottom" round
      :close-on-click-overlay="false" :safe-area-inset-bottom="true" >  
        <van-picker show-toolbar title="" :columns="nextStepData" value-key="key"
        @cancel="nextStepVisiable = false"/>
      </van-popup>

      <!-- 审批类型 -->
      <van-action-sheet v-model="approvalShow" :actions="actions" @select="typeOnSelect" 
      :close-on-click-action="true" @click-overlay="actionClose"/>

      <!-- 选择委托人 单选 -->
      <van-popup v-model="entrustVisiable" position="bottom" :close-on-click-overlay="false"
      :safe-area-inset-bottom="true" >
        <choose-people
          :items="items"
          ref="choosePeople" 
          :checked.sync="baseForm.entrustId" 
          :isName="false"
          leftTitle="委托人员"
        />
        <div class="bottom-btn">
          <van-row type="flex" justify="space-between">
            <van-col span="7">
              <van-button type="default" class="default-btn-class border-none" size="large" 
              @click="entrustCancel">取 消</van-button>
            </van-col>
            <van-col span="16">
              <van-button type="info" calss="info-btn-class" size="large" 
              @click="entrustChoose">确 定</van-button>
            </van-col>
          </van-row>
        </div>
      </van-popup>

      <!-- 会签人员 多选 -->
      <van-popup v-model="countersignVisiable" position="bottom" :close-on-click-overlay="false"
      :safe-area-inset-bottom="true" :lock-scroll="true">
        <side-choose v-if="countersignVisiable" ref="countersignChoose" :items="items" :default.sync="baseForm.countersignId"  titleText="选择会签人员" :maxHeight="showMoreSign?'69vh':'62vh'" @changed="onlineChanged"></side-choose>
        <div class="bottom-btn" >
          <div v-if="changeTemp.length > 0 && !showMoreSign" class="padding-12 font-size14">
            <van-row>
              <van-col span="4" class="font-color6">已选：</van-col>
              <van-col span="18" class="font-color3">
                <van-col span="19" class="van-ellipsis">
                  <span v-for="(sign, index) in changeTemp" :key="'sign'+index" class="more-class">{{sign.name}}</span>
                </van-col>
                <van-col span="5">等<span style="color: #1A76FF">{{changeTemp.length}}</span>人</van-col>
              </van-col>
              <van-col span="2" class="align-right" @click="showMoreSign = true">
                <img src="../../assets/documents/triangle.png" width="10px" height="6px" />
              </van-col>
            </van-row>
          </div>
          <div v-if="changeTemp.length > 0 && showMoreSign" :class="showMoreSign?'classMoreSign padding-15 font-size14':'padding-15 font-size14'">
            <van-row type="flex" justify="space-between">
              <van-col span="4" class="font-color6">已选：</van-col>
              <van-col span="4" class="font-color6 align-right" @click="clearSign">清空</van-col>
            </van-row>
            <van-row class="margin-t-15" style="display: flex;align-items: flex-end;">
              <van-col span="22">
                <span v-for="(sign, index) in changeTemp" :key="'more'+index" class="more-class">{{sign.name}}</span>
              </van-col>
              <van-col span="2" class="align-right" @click="showMoreSign = false">
                <img src="../../assets/documents/triangle_up.png" width="10px" height="6px" /></van-col>
            </van-row>
          </div>
          <van-row type="flex" justify="space-between">
            <van-col span="8">
              <div class="default-class" @click="countersignCancel">取 消</div>
            </van-col>
            <van-col span="16">
              <div class="info-class" @click="countersignChose">确 定</div>
            </van-col>
          </van-row>
        </div>
      </van-popup>

      <!-- 意见弹出框 -->
      <van-popup v-model="opinionVisiable" position="bottom" :safe-area-inset-bottom="true" 
      :style="{height: '100vh'}" :close-on-click-overlay="false">
        <!-- <van-nav-bar
          title="添加意见"
          left-text="取消"
          right-text="常用语"
          @click-left="opinionVisiable = false"
          @click-right="userfulShow = true"
          class="opinion_fixed"
        /> -->
        <div class="new_panel_scroll">
          <van-field
            v-model="baseForm.message"
            rows="5"
            autosize
            type="textarea"
            placeholder="请输入意见"
            ref="messageInput"
          />
          <div class="add-class" v-if="baseForm.message && baseForm.message != ''">
            <van-checkbox v-model="addUseful" @change="adduserfulMethod">添加到常用语</van-checkbox>
          </div>
          <van-uploader :after-read="(file) => afterRead(file, 'file', baseForm.attachment)"
          accept="*" class="new_uploadler">
            <img class="new_clip" src="../../assets/notification/clip.png">
            <span class="clip_text">添加附件</span>
          </van-uploader>
          <div class="new_file_class" v-for="(file, fileIndex) in baseForm.attachment" :key="fileIndex" @click="previewFile(file.url)">
            <img class="img-class" :src="$common.fileIcon(fileName(file.url, 'type'))">
            <p class="van-ellipsis name-width">{{ fileName(file.url, 'fullName') }}</p>
            <van-icon class="margin-l-20" name="clear" @click.stop="deleteFile(fileIndex)"/>
          </div>
        </div>
        <div class="new_panel_btn">
          <van-button size="large" type="info" @click="clickNewNextBtn">{{newNextCloseText}}</van-button>
        </div>
      </van-popup>

      <!-- 常用语弹出框 -->
      <van-popup v-model="userfulShow" position="bottom" class="userful-class" round 
      @close="closeUseful">
        <p class="progress userful-title">选择常用语：</p>
        <div class="userful-div">
          <template v-if="usefulData.length > 0">
            <van-cell v-for="(item,index) in usefulData" :key="index" :title="item.phrase" 
            @click="choseUseful(item)">
              <!-- 使用 right-icon 插槽来自定义右侧图标 -->
              <template #right-icon>
                <van-icon name="cross" style="line-height: inherit;padding: 0 5px;" @click.stop="deleteUseful(item)"/>
              </template>
            </van-cell>
          </template>
          <template v-else>
            <p class="progress">您还没有添加常用语！</p>
          </template>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script type="text/javascript">
  import choosePeople from '@/components/ChoosePeople.vue'
  import sideChoose from '@/components/SideChoose.vue'
  import forms from '@/components/Forms.vue'
  import { ImagePreview } from 'vant';

  export default {
    components: {
      'choose-people': choosePeople,
      'side-choose': sideChoose,
      'forms': forms,
      [ImagePreview.Component.name]: ImagePreview.Component,
    },
    data() {
      return {
        nextCloseTitle:"同意",
        userid: "",
        loading: false,
        isMy: false,              //是否是我发起的

        newNextCloseText: "下一步", //意见弹出框下部按钮的文字
        newBtnType: "",            //意见弹出框下部按钮类型
        opinionVisiable: false,    //意见弹出框控制器
        opinionTitle: '',
        baseForm: {
          approvalType: "",       //审批类型
          message: "",
          attachment:[],          //附件数组
          person: "",             //办理人员
          closePeople: ["1","2"],
          entrustValue: "",        //委托人
          entrustId: "0",           //委托人id
          countersign:'',          //会签
          countersignId: [],       //会签数组id
          countersignValue: [],    //会签数组value
        },
        // 审批类型--start
        actf_type:'',          //是否是会签人,1==是
        actfVisable: false,    //会签是否禁用委托和挂起和会签
        signVisable: false,    //是否禁用会签
        entrustKey: false,
        approvalShow: false,
        actions:[
        { name: '委托' , disabled: this.entrustKey},
        // { name: '挂起' },
        { name: '会签' , disabled: this.signVisable},
        { name: '撤销', disabled:!this.isMy,className: 'last-action-class'},
        { name: '取消', className: 'cancel-action-class'}],
        // 审批类型--end
        
        items:[],                   //人员选择数据树
        entrustVisiable: false,     //委托人控制器
        countersignVisiable: false, //会签控制器
        showMoreSign: false,         //显示更多会签人控制器
        changeTemp: [],              //多选人临时数据数组

        currentStep:"1",            //当前步骤
        types: "",                  //页面控制器 0不用审批
        work: {},                   //基础信息
        form: [],                   //表单
        tableData: [],              //表格
        result: [],                 //审批流程进度
        attachmentShow: false,      //流程附件是否显示
        status: {},                 //是否是多人审批信息
        backData: [],               //回退显示数据
        backBtnVisable: true,
        nextStepData:[],            //下一步步骤数据
        tplData: {},                //第一步时需要的数据

        stepForm:[],                //第一步显示的表单

        imgPreviewData:[],          //图片预览数组
        imgShow: false,
        position: 0,                //图片预览起始位置索引

        flowShow: false,            //办理人员显示控制器
        newflowuser: [],
        nextStep: "",               //下一步id值
        nextStepValue: "",          //下一步显示值
        flowPeopleData: {},         //选择办理人员存的数据

        multipleResult: [],       //办理人员多选数组值
        flowShowMultiple: false,  //办理人员多选控制器
        flowkey2:'',              //判断是多人还是单人审批，1是多人，2是单人

        

        backVisiable:false,         //回退显示控制器
        backValue:'',               //回退默认值--显示第一个
        returnFlow:{},              //回退选择步骤时接收的数据，后面确认回退会用到

        nextVisiable: false,        //点下一步弹框
        nextStepVisiable: false,    //下一步流程设定控制器

        searchValue:"",             //下拉添加一个搜索框
        resultData:[],              //查询之后的数据

        showLink: true,             //显示link
        appkeyValue: "",            //这里是多人审批用的参数，是否是最后一个人审批的

        remain_done: [],            //待办流程进度数据

        reminderVisiable: false,    //催办控制器
        reminderData:[],            //催办的数据
        reminderCheck:[],

        formfiles: [],              //表单附件

        flowkey1:'',              //办理人是全员时
        flowShowAll: false,          //所有人员办理人控制器
        flowShowALLId: [],           //所有人员 选择后的id
        flowShowALLValue: [],        //所有人员 选择后的信息
        flowShowMore: false,         //显示更多办理人控制器
        flowChangeTemp: [],          //办理人员临时数组

        usefulData: [],              //常用语列表
        userfulShow: false,          //常用语弹出框
        addUseful: false,

        sonCompany: false,        //付款申请书金额特殊字段
        editFlag: 0,             //表单是否可以编辑
      }
    },
    activated() {
      this.$toast({
        duration: 0,
        forbidClick: true,
        className: 'loading-toast',
        icon: require('../../assets/loading.gif'),
      })
      this.nextCloseTitle = "同意"

      this.newNextCloseText = "下一步", //意见弹出框下部按钮的文字
      this.newBtnType = "",            //意见弹出框下部按钮类型
      this.opinionVisiable = false,    //意见弹出框控制器
      this.opinionTitle = ""
      this.userid = ""
      this.loading = false
      this.baseForm = {
        approvalType: "",
        message: "",
        attachment:[],            //附件数组
        person: "",               //办理人员
        closePeople: ["1","2"],
        entrustValue: "",         //委托人 
        entrustId: "0",           //委托人id
        countersign:'',          //会签
        countersignId: [],       //会签数组id
        countersignValue: [],    //会签数组value
      },

      // 审批类型--start
      this.actf_type = ""        //是否是会签人,1==是
      this.actfVisable = false,    //会签是否禁用委托和挂起
      this.approvalShow = false,
      this.entrustKey = false,
      this.signVisable = false,
      this.actions = [
      { name: '委托', disabled: this.entrustKey },
      // { name: '挂起'},
      { name: '会签', disabled: this.signVisable},
      { name: '撤销', disabled:!this.isMy,className: 'last-action-class'},
      { name: '取消', className: 'cancel-action-class'}],
      // 审批类型--end
      this.items = [],                   //人员选择数据树
      this.entrustVisiable = false,      //委托人控制器
      this.countersignVisiable = false,  //会签控制器
      this.showMoreSign = false,         //显示更多会签人控制器
      this.changeTemp = [],              //多选人临时数据数组
      this.currentStep = '',
      this.nextStep = "",//下一步id值
      this.nextStepValue = "",//下一步显示值
      this.newflowuser = [],
      this.flowPeopleData = {},//选择办理人员存的数据
      this.types = "",//控制器 0不用审批
      this.work = {},//基础信息
      this.form = [],//表单
      this.tableData = [],//表格
      this.result = [],//审批流程进度
      this.attachmentShow = false,      //流程附件是否显示
      this.status = {},//是否是多人审批信息
      this.backData = [],//回退显示数据
      this.backBtnVisable = true,
      this.nextStepData = [],//下一步步骤数据
      this.tplData = {},//第一步时需要的数据
      this.stepForm = [],//第一步时显示的表单

      this.multipleResult = [],       //办理人员多选数组值
      this.flowShowMultiple = false,  //办理人员多选控制器
      this.flowkey2 = '',             //判断是多人还是单人审批，1是多人，2是单人

      this.flowkey1 = '',             //办理人是全员时

      this.imgPreviewData = [],//图片预览数组
      this.backValue = '',//回退默认值--显示第一个
      this.returnFlow = {},//回退选择步骤时接收的数据，后面确认回退会用到
      this.searchValue = "",//下拉添加一个搜索框
      this.resultData = [],//查询之后的数据
      this.showLink = true,
      this.appkeyValue = "",
      this.remain_done = [],            //待办流程进度数据
      this.reminderVisiable = false,    //催办控制器
      this.reminderData = [],            //催办的数据
      this.flowShowAll = false
      this.flowShowALLId = [],           //所有人员 选择后的id
      this.flowShowMore = false,         //显示更多办理人控制器

      this.formfiles = [],
      this.$bridge.callHandler('navTitle', {title: '审批详情'})

      if ((this.$route.query.from && this.$route.query.from == 'origin') || this.$route.query.close == 'close') {
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          responseCallback('h5 done!')
        })
      } else {
        this.$bridge.callHandler('navBack')
      }


      this.getDetailInfo()
      this.treeList()
      // 获取常用语
      this.getUsefulData()

    },
    watch: {
      /*'backValue':{
        handler(newV, oldV) {
          console.log(newV)
          this.getBackInfo()
        }
      },*/
      /*'nextStep': {
        handler(newV, oldV) {
          this.flowPerson()
        }
      }*/
      'searchValue': {
        handler(newV, oldV) {
          if(newV == '') { // 被关键字清空 还原列表项
            this.resultData = this.$common.deepCopy(this.newflowuser)
          }
        },
        deep: true
      },
      'actf_type': {
        handler(newV, oldV) {
          if (newV == '1') { //会签时候禁用委托和挂起,会签
            this.actfVisable = true
            this.actions = [
              { name: '委托', disabled: this.actfVisable },
              // { name: '挂起', disabled: this.actfVisable  },
              { name: '会签', disabled: this.actfVisable },
              { name: '撤销', disabled:!this.isMy,className: 'last-action-class'},
              { name: '取消', className: 'cancel-action-class'}]
          } else {
            this.actfVisable = false
          }
        }
      },
      'status': {
        handler(newV, oldV) {
          // console.log(newV)
          // 多人审批  不能委托和挂起
          if (newV.appkey == "1") {
            this.entrustKey = true
            this.actions = [
            { name: '委托', disabled: this.entrustKey },
            // { name: '挂起', disabled: this.actfVisable || this.entrustKey },
            { name: '会签', disabled: this.actfVisable },
            { name: '撤销', disabled:!this.isMy,className: 'last-action-class'},
            { name: '取消', className: 'cancel-action-class'}]
          }else {
            this.entrustKey = false
          }

          if (newV.flowkey8) {
            let signArr = newV.flowkey8.split("|")
            if (signArr[0] == '0') {
              // 是否允许会签 1是可以 0是不可以
              this.signVisable = true
              this.actions = [
              { name: '委托', disabled: this.entrustKey },
              // { name: '挂起', disabled: this.actfVisable },
              { name: '会签', disabled: this.signVisable },
              { name: '撤销', disabled:!this.isMy,className: 'last-action-class'},
              { name: '取消', className: 'cancel-action-class'}]
            } else {
              this.signVisable = false
            }
          }
        },
        deep: true
      },
      // 判断是否有撤销
      'isMy':{
        handler(newV, oldV) {
          if (newV) {
            this.actions = [
              { name: '委托', disabled:this.entrustKey },
              // { name: '挂起', disabled:this.actfVisable  },
              { name: '会签', disabled:this.signVisiable },
              { name: '撤销', disabled:!this.isMy,className: 'last-action-class'},
              { name: '取消', className: 'cancel-action-class'}]
          }
        }
      },
      // 监听意见，将添加到常用语按钮取消勾选
      'baseForm.message': {
        handler(newV, oldV) {
          if (newV) {
            this.addUseful = false
          }
        }
      },
      /**
       * 会签人弹出框
       */
      'countersignVisiable': {
        handler(newV, oldV) {
          if (this.countersignVisiable) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      },
    },
    methods: {
      /**
       * 用户信息
       * @return {[type]} [description]
       */
      checkIdCard(uid) {
        // console.log(uid)
        this.$bridge.callHandler('showUserInfo',{userId: uid})
      },
      /**
       * [弹出层关闭时触发 之后有确认提示框就不关闭导航栏遮罩层]
       * @return {[type]} [description]
       */
      popupClose() {
        this.$bridge.callHandler('navKeepView')
      },
      /**
       * 返回方法
       * @return {[type]} [description]
       */
      backMethod() {
        if ((this.$route.query.from && this.$route.query.from == 'origin') || this.$route.query.close == 'close') {
          this.$bridge.callHandler('close')
        } else {
          this.$router.go(-1)
        }
      },
      /**
       * 树数据
       */
      treeList() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}meeting.php`,
          data:{
            do: "department"
          }
        }
        this.$axios(config).then(res => {
          let treeData = this.$common.deepCopy(res.data)
          for (var i = 0; i < treeData.length; i++) {
            treeData[i].text = treeData[i].name
            for (var j = 0; j < treeData[i].children.length; j++) {
              (treeData[i].children)[j].text = (treeData[i].children)[j].name;
              (treeData[i].children)[j].choosed = false
            }
          }
          this.items = this.$common.deepCopy(treeData)
          // console.log(this.items)
        }).catch(err => {
          console.log(err)
          this.$toast(err.msg)
        })
      },
      /**
       * [fileName description]
       * @param  {[type]} url  [description]
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      fileName(url, type) {
        let fullName   = !url.split('@daxsdfcsgr6time666@')[1] ? url : url.split('@daxsdfcsgr6time666@')[1]
        let pointCount = fullName.split('.').length
        let fileType   = fullName.split('.')[pointCount - 1]
        switch(type){
          case 'name':
            return fullName.split('.', pointCount - 1).join('.');
          case 'type':
            return fileType;
          case 'fullName':
          default:
            return fullName;
        }
      },
       /**
       * 成功读取文件后 上传
       * @param  {[type]} file     [description]
       * @param  {[type]} formItem [description]
       * @return {[type]}          [description]
       */
      afterRead(file, type, formItem) {
        let self = this
        self.$bridge.callHandler('navKeepView')
        self.$bridge.callHandler('openFullScreen',{left:'取 消',title:'添加意见',right:'常用语'})
        // console.log(file)
        let formData = new FormData()
        formData.append('file', file.file)
        formData.append('do', 'file')
        this.$toast({
          message: '上传中...',
          overlay: true,
          duration: 0,
          forbidClick: true,
          className: 'loading-toast',
          icon: require('../../assets/loading.gif'),
        })
        let config = {
          headers: { //添加请求头
            'Content-Type': 'multipart/form-data'
          },
          url: `${this.$common.basePath}login.php`,
          data: formData,
          method: 'POST'
        }
        this.$axios(config).then(res => {
          self.$bridge.callHandler('cancelNavKeepView')
          formItem.push({'url':res.data.url, 'name':self.fileName(res.data.url,'fullName')})
          this.$nextTick(_ => {
            this.$toast.clear()
          })
        }).catch(err => {
          this.$toast.clear()
          self.$bridge.callHandler('cancelNavKeepView')
          console.log(err)
          this.$toast({
            icon: 'cross',
            message: err.msg ? err.msg : '上传失败!'
          })
        })
      },
      /**
       * 审批详情
       */
      getDetailInfo() {
        let config = {
          method: "POST",
          url: `${this.$common.basePath}workclass.php`,
          data: {
            do: "editlist",
            workid: this.$route.query.workid,
            type: this.$route.query.type,
            user_id: this.$store.state.userId,
            // 以下消息需要的参数
            flownum: this.$route.query.flownum,
            pertype: this.$route.query.pertype,
            perid: this.$route.query.perid
          }
        }
        this.$axios(config).then(res => {
          // 当前步骤，非常重要的值
          this.currentStep = res.data.status.list.flownum

          this.appkeyValue = res.data.appkey
          this.actf_type = res.data.actf_type
          this.types = res.data.type
          this.work = res.data.work
          this.result = res.data.results
          if (this.result[0].file.length > 0) {
            this.attachmentShow = true
          }
          this.tableData = res.data.from
          this.form = res.data.result
          console.log(this.form)
          this.status = res.data.status
          this.backData = res.data.perc
          this.remain_done = res.data.remain_done
          this.formfiles = res.data.form_file
          if (this.backData.length == 0) {
            this.backBtnVisable = false
          }
          this.tplData = res.data.tpl
          if (res.data.perc.length > 0) {
            this.backValue = res.data.perc[0].fid
          }
          this.nextStepData = res.data.step

          // 付款申请书  特殊处理 -- start
          if (this.tplData.tplid == '8903') {
            let money = 0;
            this.form.forEach(item => {
              if (item.fromname == '付款金额') {
                money = item.inputvalue
                money = money.split(".")[0]
              }
            })

            // 当前步骤是财务负责人
            if (this.status.list.flownum == '5') {
              this.sonCompany = false
              // 小于2万到出纳
              if (money <= 20000) {
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (item.flownum == '9') {
                    return item
                  }
                })
              } else {
                // 分管领导
                this.nextStepData = this.nextStepData.filter(item => {
                  if (item.flownum == '6') {
                    return item
                  }
                })
              }
            }
            // 当前步骤是集团的分管领导
            if (this.status.list.flownum == '6') {
              if (!this.sonCompany) {
                // 集团总公司
                // 小于1000000到出纳
                if (money <= 1000000) {
                  this.nextStepData = this.nextStepData.filter(item => {
                    if (item.flownum == '9') {
                      return item
                    }
                  })
                } else {
                  // 总经理
                  this.nextStepData = this.nextStepData.filter(item => {
                    if (item.flownum == '7') {
                      return item
                    }
                  })
                }
              } else {
                // 子公司的金额
                // 小于2000000到出纳
                if (money <= 2000000) {
                  this.nextStepData = this.nextStepData.filter(item => {
                    if (item.flownum == '9') {
                      return item
                    }
                  })
                } else {
                  // 总经理
                  this.nextStepData = this.nextStepData.filter(item => {
                    if (item.flownum == '7') {
                      return item
                    }
                  })
                }
              }
            }
            // 子公司1 -- 技术服务公司法人
            if (this.status.list.flownum == '13' || this.status.list.flownum == '16') {
              this.sonCompany = true
              if (money <= 1000000) {
                // 小于100万到出纳
                this.nextStepData = this.nextStepData.filter(item => {
                  if (item.flownum == '9') {
                    return item
                  }
                })
              } else {
                // 集团分管领导
                this.nextStepData = this.nextStepData.filter(item => {
                  if (item.flownum == '6') {
                    return item
                  }
                })
              }
            }
          }
          // 付款申请书  特殊处理 -- end
          
          // 付款申请书(试用版)  特殊处理 -- start
          if (this.tplData.tplid == '8957') {
            let money1 = 0;
            this.form.forEach(item => {
              if (item.fromname == '付款金额') {
                money1 = item.inputvalue
                money1 = money1.split(".")[0]
              }
            })

            // 当前步骤是集团财务负责人
            if (this.status.list.flownum == '5') {
              this.sonCompany = false
              // 小于2万到出纳
              if (money1 <= 20000) {
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (item.flownum == '8') {
                    return item
                  }
                })
              } else {
                // 分管领导
                this.nextStepData = this.nextStepData.filter(item => {
                  if (item.flownum == '6') {
                    return item
                  }
                })
              }
            }
            // 当前步骤是集团的分管领导
            if (this.status.list.flownum == '6') {
              if (!this.sonCompany) {
                // 集团总公司
                // 小于1000000到出纳
                if (money1 <= 1000000) {
                  this.nextStepData = this.nextStepData.filter(item => {
                    if (item.flownum == '8') {
                      return item
                    }
                  })
                } else {
                  // 总经理
                  this.nextStepData = this.nextStepData.filter(item => {
                    if (item.flownum == '7') {
                      return item
                    }
                  })
                }
              } else {
                // 子公司的金额
                // 小于2000000到出纳
                if (money1 <= 2000000) {
                  this.nextStepData = this.nextStepData.filter(item => {
                    if (item.flownum == '8') {
                      return item
                    }
                  })
                } else {
                  // 总经理
                  this.nextStepData = this.nextStepData.filter(item => {
                    if (item.flownum == '7') {
                      return item
                    }
                  })
                }
              }
            }
            // 子公司1 -- 技术服务公司法人或者安全公司法人
            if (this.status.list.flownum == '12' || this.status.list.flownum == '15') {
              this.sonCompany = true
              if (money1 <= 1000000) {
                // 小于100万到出纳
                this.nextStepData = this.nextStepData.filter(item => {
                  if (item.flownum == '8') {
                    return item
                  }
                })
              } else {
                // 集团分管领导
                this.nextStepData = this.nextStepData.filter(item => {
                  if (item.flownum == '6') {
                    return item
                  }
                })
              }
            }
          }
          // 付款申请书(试用版)  特殊处理 -- end
          // 费用报销单 特殊处理 -- start
          if (this.tplData.tplid == '8904') {
            let money2 = 0;
            this.form.forEach(item => {
              if (item.inputname == 'toa_6135_20191225173949') {
                money2 = item.inputvalue
                money2 = money2.split(".")[0]
              }
            })
            // 集团财务负责人
            if (this.status.list.flownum == '4') {
              if (money2 < 20000) {
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (item.flownum == '8') {
                    return item
                  }
                })
              } else {
                // 分管领导
                this.nextStepData = this.nextStepData.filter(item => {
                  if (item.flownum == '5') {
                    return item
                  }
                })
              }
            }
            // 当前是分管领导
            if (this.status.list.flownum == '5') {
              // 小于100万到出纳
              if(money2 < 1000000) {
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (item.flownum == '8') {
                    return item
                  }
                })
              } else {
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (item.flownum == '6') {
                    return item
                  }
                })
              }
            }
            // 子公司财务负责人
            if (this.status.list.flownum == '17' || this.status.list.flownum == '19') {
              if (money2 < 1000000) {
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (item.flownum == '8') {
                    return item
                  }
                })
              } else {
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (this.status.list.flownum == '17') {
                    // 安全子公司分管领导
                    if (item.flownum == '14') {
                      return item
                    }
                  } else if (this.status.list.flownum == '19') {
                    // 技术子公司分管领导
                    if (item.flownum == '11') {
                      return item
                    }
                  }
                  
                })
              }
            }
            // 子公司分管领导
            if (this.status.list.flownum == '11' || this.status.list.flownum == '14') {
              if (money2 < 2000000) {
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (item.flownum == '8') {
                    return item
                  }
                })
              } else {
                // 技术子公司法人
                if (this.status.list.flownum == '11') {
                  this.nextStepData = this.nextStepData.filter((item, index) => {
                    if (item.flownum == '12') {
                      return item
                    }
                  })
                } else if (this.status.list.flownum == '14') {
                  // 安全子公司法人
                  this.nextStepData = this.nextStepData.filter((item, index) => {
                    if (item.flownum == '15') {
                      return item
                    }
                  })
                }
              }
            }
          }
          // 费用报销单 特殊处理 -- end
          // 差旅费报销 特殊处理 -- start
          if (this.tplData.tplid == '8905') {
            let money3 = 0;
            console.log(this.form)
            this.form.forEach(item => {
              if (item.inputname == 'toa_5945_20191206212436') {
                money3 = item.inputvalue
                money3 = money3.split(".")[0]
              }
            })
            // 集团财务负责人
            if (this.status.list.flownum == '5') {
              if (money3 < 20000) {
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (item.flownum == '9') {
                    return item
                  }
                })
              } else {
                // 分管领导
                this.nextStepData = this.nextStepData.filter(item => {
                  if (item.flownum == '6') {
                    return item
                  }
                })
              }
            }
            // 当前是分管领导
            if (this.status.list.flownum == '6') {
              // 小于100万到出纳
              if(money3 < 1000000) {
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (item.flownum == '9') {
                    return item
                  }
                })
              } else {
                // 大于100万到总经理
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (item.flownum == '7') {
                    return item
                  }
                })
              }
            }
            // 子公司财务负责人
            if (this.status.list.flownum == '18' || this.status.list.flownum == '20') {
              if (money3 < 1000000) {
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (item.flownum == '9') {
                    return item
                  }
                })
              } else {
                // 大于100万到子公司分管领导
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (this.status.list.flownum == '18') {
                    // 安全子公司分管领导
                    if (item.flownum == '15') {
                      return item
                    }
                  } else if (this.status.list.flownum == '20') {
                    // 技术子公司分管领导
                    if (item.flownum == '12') {
                      return item
                    }
                  }
                  
                })
              }
            }
            // 子公司分管领导
            if (this.status.list.flownum == '12' || this.status.list.flownum == '15') {
              if (money3 < 2000000) {
                this.nextStepData = this.nextStepData.filter((item, index) => {
                  if (item.flownum == '9') {
                    return item
                  }
                })
              } else {
                // 技术子公司法人
                if (this.status.list.flownum == '12') {
                  this.nextStepData = this.nextStepData.filter((item, index) => {
                    if (item.flownum == '13') {
                      return item
                    }
                  })
                } else if (this.status.list.flownum == '15') {
                  // 安全子公司法人
                  this.nextStepData = this.nextStepData.filter((item, index) => {
                    if (item.flownum == '16') {
                      return item
                    }
                  })
                }
              }
            }
          }
          // 差旅费报销 特殊处理 -- end
          // console.log(this.nextStepData)
          // 数据处理
          this.nextStepData = this.nextStepData.map(item => {
            return {
              key: item.flowname,
              id: item.fid
            }
          })

          if (this.nextStepData.length > 0) {
            this.nextStep = this.nextStepData[0].id //设置默认选中第一个
            this.nextStepValue = this.nextStepData[0].key
            this.flowPerson()
          }
          this.backData = this.backData.map(item => {
            return {
              key: item.flowname,
              id: item.fid
            }
          })
          if(this.currentStep == '1') {
            //第一步时，去获取信息
            this.baseFormData()
          }
          this.editFlag = res.data.edit
          if(this.editFlag == 1) {
            // 表单可编辑时取的数据
            this.formEdit()
          }
          this.$nextTick(_ => {
            this.userid = this.$store.state.userId
            this.isMy = res.data.work.uid == this.userid ? true:false
            // 判断是否是最后一步
            if (this.nextStepData.length <= 0) {
              this.nextCloseTitle = "结束"
            }

            // 流程图
            // if(this.work.flow_img) {
            //   this.$bridge.callHandler('showProcessImg', {
            //     url: `${this.$common.filePath}${this.work.flow_img}`,
            //   })
            // }
            this.$bridge.callHandler('navRight', {title: "流程图"})
            this.$bridge.registerHandler('navRightClicked', (data, callBack)  => {
              this.$bridge.callHandler('openNewView', {url: `${window.location.origin}/h5/#/gojsChart?id=${this.work.id}&type=2&userid=${this.$store.state.userId}&token=${this.$store.state.token}`})
            })

            setTimeout(_ => {
              // 全屏下的左边按钮点击事件 
              this.$bridge.registerHandler('fullScreenLeftClick',(data,responseCallback) => {
                this.opinionVisiable = false
                this.$bridge.callHandler('cancelFullScreen',{title:'审批详情',right:'流程图'})
                this.userfulShow = false
                responseCallback('leftClick')
              })
              // 全屏下的右边按钮点击事件
              this.$bridge.registerHandler('fullScreenRightClick',(data,responseCallback) => {
                this.userfulShow = true
                this.$refs.messageInput.blur()
                this.$bridge.callHandler('navKeepView')
                responseCallback('rightClick')
              })
            },500)

            this.loading = true
            setTimeout(_ => {
              this.$toast.clear()
            },100)

          })

          
          
        }).catch(err => {
          console.log(err)
        })
      },
      /**
       * 预览图片
       */
      previewImg(url) {
        ImagePreview([url]);
      },
      /**
       * 第一步时  获取信息
       * 或者是：表单可编辑时拿的数据
       * @param  {[type]} typeid [description]
       * @param  {[type]} tplid  [description]
       * @return {[type]}        [description]
       */
      baseFormData() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}workclass.php`,
          data: {
            do: 'workclassaddlist',
            tplid: this.tplData.tplid,
            workid: this.$route.query.workid,
            typeid: this.tplData.typeid,
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          this.work = res.data.work
          this.stepForm = res.data.rowdb
          this.tableData = res.data.results 
        }).catch(err => {
          console.log(err)
        })
      },
      /**
       * 当表单可编辑时，访问这个接口拿表单数据
       * @return {[type]} [description]
       */
      formEdit() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}workclass.php`,
          data: {
            do: 'workclassaddlist',
            tplid: this.tplData.tplid,
            workid: this.$route.query.workid,
            typeid: this.tplData.typeid,
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          this.stepForm = res.data.rowdb
          this.tableData = res.data.results 
        }).catch(err => {
          console.log(err)
        })
      },
      /**
       * 关联表单点击
       * @return {[type]} [description]
       */
      closeFormClick(obj) {
        console.log(obj)
        this.$bridge.callHandler('openNewView', {
          url: `${window.location.origin}/h5/#/approvalInfo?workid=${obj.id}&type=2&close=close&userid=${this.$store.state.userId}&token=${this.$store.state.token}`
        })
      },
      /**
       * 编辑
       */
      editeForm() {
        this.$router.push({ name:"approvalForm", query:{ 
          workid: this.$route.query.workid, 
          typeid: this.work.typeid, 
          tplid: this.work.tplid,
          status: "edit" } })
      },
      /**
       * 重新提交
       */
      againSubmit() {
        this.$router.push({ name:"approvalForm", query:{ 
          workid: this.$route.query.workid, 
          typeid: this.work.typeid, 
          tplid: this.work.tplid,
          status: "again" } })
      },
      /**
       * 撤销
       * @return {[type]} [description]
       */
      revocation() {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title:"警告",
          message:"撤销将不可还原，是否继续？"
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          let config = {
            method: "post",
            url: `${this.$common.basePath}workclass.php`,
            data: {
              do: "listworkkey",
              workid: this.$route.query.workid,
              user_id: this.$store.state.userId
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$toast({
              message:'撤销成功',
              forbidClick: true,
              duration: 1500
            })
            setTimeout(_ => {
              this.$toast({
                duration: 500,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
            },1500)
            setTimeout(_ => {
              // this.$router.push({name: "myApproval"})
              // this.getDetailInfo()
              // // 初始化全部的 data数据
              // Object.assign(this.$data, this.$options.data());
              // this.treeList()
              this.backMethod()
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
            },2000)
          }).catch(err => {
            this.$toast.clear()
            this.$toast.fail(err.msg)
            console.log(err)
          })
        }).catch(() => {
          this.$bridge.callHandler('cancelNavKeepView')
        })
      },
      /**
       * 审批类型 选择
       * @return {[type]} [description]
       */
      typeOnSelect (item) {
        this.baseForm.approvalType = item.name == '取消'?'':item.name

        if (item.name == '委托') {
          // this.entrustMethod()
          this.entrustVisiable = true
        } else if (item.name == '挂起') {
          this.acteMethod()
        } else if (item.name == '会签') {
          this.countersignVisiable = true
        } else if (item.name == '撤销') {
          this.revocation()
        } else if (item.name == '取消') {
          this.$bridge.callHandler('cancelNavKeepView')
        }
      },
      /**
       * [更多菜单 点击遮罩层触发 description]
       * @return {[type]} [description]
       */
      actionClose() {
        this.$bridge.callHandler('cancelNavKeepView')
      },
      /**
       * 审批类型
       * @return {[type]} [description]
       */
      showApprovalType () {
        this.$bridge.callHandler('navKeepView')
        this.approvalShow = true
      },
      /**
       * 点击拒绝按钮
       * @return {[type]} [description]
       */
      clickDisAgree(type,name) {
        this.newNextCloseText = "提交"
        // 调用原生头部
        this.$bridge.callHandler("openFullScreen",{left:"取 消",title:"添加意见",right:"常用语"})
        this.opinionVisiable = true
        this.newBtnType = type
        // this.opinionTitle = "添加拒绝意见"

        // 会签人拒绝
        if (name == 'actf') {
          this.newNextCloseText = '提交'
        }

      },
      /**
       * 点击同意或结束按钮
       * @return {[type]} [description]
       */
      clickAgree(type,name) {
        if (this.nextCloseTitle == '结束') {
          this.newNextCloseText = "提交"
        } else {
          this.newNextCloseText = "下一步"
        }
        // 调用原生头部
        this.$bridge.callHandler("openFullScreen",{left:"取 消",title:"添加意见",right:"常用语"})
        this.opinionVisiable = true
        // this.opinionTitle = "添加同意意见"
        this.newBtnType = type

        // 会签人同意
        if (name == 'actf') {
          this.newNextCloseText = "提交"
        }
      },
      /**
       * 回退框显示
       */
      clickBack(type) {
        if (!this.backBtnVisable) {
          this.$toast("当前步骤不能回退")
        } else {
          this.newNextCloseText = "下一步"
          // 调用原生头部
          this.$bridge.callHandler("openFullScreen",{left:"取 消",title:"添加意见",right:"常用语"})
          this.opinionVisiable = true
          // this.opinionTitle = "添加回退意见"
          this.newBtnType = type
        }
      },
      /**
       * 在线选人
       * @return {[type]} [description]
       */
      onlineChanged(e) {
        //人员去重
        let res = new Map();
        this.changeTemp = e.filter((item,index,array) => {
          return !res.has(item.id) && res.set(item.id, 1)
        })
      },
      /**
       * 会签人员  取消按钮
       * @return {[type]} [description]
       */
      countersignCancel() {
        this.countersignVisiable = false
        this.$bridge.callHandler('cancelNavKeepView')
      },
      /**
       * 会签人员选择
       * @return {[type]} [description]
       */
      countersignChose() {
        this.baseForm.countersignId = this.$refs.countersignChoose.getChoosed()
        this.baseForm.countersignValue = this.$refs.countersignChoose.getChoosedByName()

        //人员去重
        let res = new Map();
        this.baseForm.countersignValue = this.baseForm.countersignValue.filter((item,index,array) => {
          return !res.has(item.id) && res.set(item.id, 1)
        })

        let c_msg = '';
        // 人数大于3
        if (this.baseForm.countersignValue.length > 3) {
          c_msg = '【'+ this.baseForm.countersignValue[0].name+','+this.baseForm.countersignValue[1].name+','+ this.baseForm.countersignValue[2].name+'】等'
          // 人数一人
        } else if (this.baseForm.countersignValue.length >= 1 && this.baseForm.countersignValue.length < 2) {
          c_msg = '【'+ this.baseForm.countersignValue[0].name+'】'
          // 人数两人
        } else if (this.baseForm.countersignValue.length >= 1 && this.baseForm.countersignValue.length < 3) {
          c_msg = '【'+ this.baseForm.countersignValue[0].name+','+this.baseForm.countersignValue[1].name+'】'
          // 人数三人
        } else if (this.baseForm.countersignValue.length >= 1 && this.baseForm.countersignValue.length <= 3) {
          c_msg = '【'+ this.baseForm.countersignValue[0].name+','+this.baseForm.countersignValue[1].name+','+ this.baseForm.countersignValue[2].name+'】'
        }
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '是否将审批交由'+ c_msg +' 会签？所有会签人办理完成后才能转交下一步'
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          let config = {
            method: "post",
            url: `${this.$common.basePath}workclass.php`,
            data: {
              do: 'actf',
              actf_id: this.baseForm.countersignId,
              perid: this.status.perid,
              workid: this.$route.query.workid,
              typeid: this.status.typeid,
              user_id: this.$store.state.userId
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.countersignVisiable = false
            // 刷新页面
            // this.getDetailInfo()
            // // 重置审批类型为空
            // // this.baseForm.approvalType = ''
            // // 初始化全部的 data数据
            // Object.assign(this.$data, this.$options.data());
            // this.treeList()
            this.backMethod()
            // 原生刷新页面
            this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
          }).catch(err => {
            console.log(err)
            this.$toast.clear()
            this.countersignVisiable = false
            this.$toast({
              type: 'fail',
              message: err.msg,
              forbidClick: true,
              duration:3000
            })
          })
        }).catch((error) => {
          console.log(error)
          this.$bridge.callHandler('navKeepView')
        })
      },
      /**
       * 会签清空
       * @return {[type]} [description]
       */
      clearSign () {
        this.baseForm.countersignId = []
        this.baseForm.countersignValue = []
        this.changeTemp = []
        this.showMoreSign = false
      },
      /**
       * 委托人 取消
       * @return {[type]} [description]
       */
      entrustCancel() {
        this.$bridge.callHandler('cancelNavKeepView')
        this.entrustVisiable = false
      },
      /**
       * 委托人确认选择
       * @return {[type]} [description]
       */
      entrustChoose () {
        let obj = this.$refs.choosePeople.confirmChose()
        if (obj) {
          this.entrustMethod(obj)
          // this.entrustVisiable = false
        }
      },
      /**
       * 选择委托
       * @return {[type]} [description]
       */
      entrustMethod (obj) {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '是否确认委托给 ' + obj.name + ' ？'
        }).then(() => {
          this.$bridge.callHandler("cancelNavKeepView")
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          // on confirm
          this.baseForm.entrustId = obj.id,
          this.baseForm.entrustValue = obj.name
          let config = {
            method: "post",
            url: `${this.$common.basePath}workclass.php`,
            data: {
              do: 'actd',
              perid: this.status.perid,
              workid: this.$route.query.workid,
              entrust: this.baseForm.entrustId,
              user_id: this.$store.state.userId
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$toast({
              message: "成功委托",
              forbidClick: true,
              duration: 1000
            })
            setTimeout( _ => {
              this.$toast({
                duration: 500,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
            },1000)
            setTimeout( _ => {
              // this.$router.push({name: "myApproval"})
              // this.getDetailInfo()
              // // 初始化全部的 data数据
              // Object.assign(this.$data, this.$options.data());
              // this.treeList()
              this.backMethod()
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
            },1500)
          }).catch(err => {
            console.log(err)
            this.$toast.clear()
            this.$toast.fail(err.msg)
            this.baseForm.entrustId = ''
            this.baseForm.entrustValue = ''
          })
        }).catch(() => {
          // on cancel
          this.$bridge.callHandler("navKeepView")
        });
      },
      /**
       * 选择 挂起
       * @return {[type]} [description]
       */
      acteMethod () {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '是否确认挂起？'
        }).then(() => {
          this.$bridge.callHandler("cancelNavKeepView")
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          let config = {
            method: "POST",
            url: `${this.$common.basePath}workclass.php`,
            data: {
              do: "acte",
              perid: this.status.perid,
              workid: this.$route.query.workid,
              hangdate: this.$common.formatTime(new Date(), 'Y-M-D h:m:s'),
              user_id: this.$store.state.userId
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$toast({
              message: "成功挂起",
              forbidClick: true,
              duration: 1000
            })
            setTimeout( _ => {
              this.$toast({
                duration: 1500,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
            },1000)
            setTimeout( _ => {
              // this.$router.push({name: "myApproval"})
              // this.getDetailInfo()
              // // 初始化全部的 data数据
              // Object.assign(this.$data, this.$options.data());
              // this.treeList()
              this.backMethod()
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
            },1500)
          }).catch(err => {
            this.$toast.clear()
            this.$toast.fail(err.msg)
            console.log(err)
          })
        }).catch(() => {
          // 取消就置为空
          this.baseForm.approvalType = ""
          this.$bridge.callHandler('cancelNavKeepView')
        })
      },
      /**
       * 取消挂起
       * @return {[type]} [description]
       */
      cancelActe () {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '是否确认取消挂起？'
        }).then(() => {
          this.$bridge.callHandler("cancelNavKeepView")
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          let config = {
            method: "POST",
            url: `${this.$common.basePath}workclass.php`,
            data: {
              do: "acte",
              perid: this.status.perid,
              workid: this.$route.query.workid,
              hangdate: null,
              user_id: this.$store.state.userId
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$toast({
              message: "成功取消挂起",
              forbidClick: true,
              duration: 1000
            })
            setTimeout( _ => {
              this.$toast({
                duration: 1500,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
            },1000)
            setTimeout( _ => {
              // this.$router.push({name: "myApproval"})
              // this.getDetailInfo()
              // // 初始化全部的 data数据
              // Object.assign(this.$data, this.$options.data());
              // this.treeList()
              this.backMethod()
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
            },1500)
          }).catch(err => {
            console.log(err)
            this.$toast.clear()
          })
        }).catch(() => {
          this.$bridge.callHandler('cancelNavKeepView')
        })
      },
      /**
       * 下一步流程设定  弹出框显示
       * @return {[type]} [description]
       */
      nextStepMethod () {
        //审批类型为通过；如果是‘多人审批’并且是‘同时通过’就不能选步骤，就默认步骤
        if (this.newBtnType == 1 && this.nextStepData.length > 0 
        && (this.status.appkey == '1' && this.status.appkey1 == '1')) {
          this.nextStepVisiable = false
        } else {
          this.showLink = true
          this.nextStepVisiable = true
        }
      },
      /**
       * 下一步流程设定 数据
       * @return {[type]} [description]
       */
      nextStepConfirm(e) {
        this.nextStep = e.id
        this.nextStepValue = e.key
        // this.nextStepVisiable = false
        this.flowPerson()
      },
      /**
       * 选择下一步的办理人员
       * @return {[type]} [description]
       */
      flowPerson() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}workclass.php`,
          data: {
            do: "flow",
            uid: this.$store.state.userId,
            fid: this.nextStep,
            flow_user_id: this.work.uid,   //发起人id
          }
        }
        this.$axios(config).then(res => {
          let persons = res.data.flowuser //设置初始默认值
          persons = persons.split(",");
          // 去重
          let per = new Map();
          persons = persons.filter((item,index,array) => {
            return !per.has(item) && per.set(item, 1)
          })
          this.baseForm.person = persons.toString();

          this.flowPeopleData = res.data //存信息，后面'下一步'会用到
          this.newflowuser = res.data.newflowuser

          // flowkey1 判断是全员时
          this.flowkey1 = res.data.flowkey1
          if (res.data.flowkey1 == '1') {
            // 树状结构  默认人  就默认勾选
            this.flowShowALLValue = res.data.flowuser.split(",");
          }
          // flowkey2 用来判断是多人审批还是单人，1是多人，2是单人
          this.flowkey2 = res.data.flowkey2
          if (res.data.flowkey2 == 2) {
            // 将默认值加入到newflowuser中
            this.newflowuser.splice(0, 0, this.baseForm.person)
            // 去重
            let res = new Map();
            this.newflowuser = this.newflowuser.filter((item,index,array) => {
              return !res.has(item) && res.set(item, 1)
            })
          }
          this.resultData = this.newflowuser
          // 设置多人选择组件默认选择项，数组格式的
          if (res.data.flowuser) {
            this.multipleResult = res.data.flowuser.split(",")
          } else {
            this.multipleResult = []
          }
        }).catch(err => {
          console.log(err)
        })
      },
      /**
       * 显示弹框
       * @return {[type]} [description]
       */
      showFlowPeople() {
        let self = this
        // flowkey2 :1多人，2单人
        if (self.flowkey2 == '1') {
          // flowkey1: 1可选，2不可选
          if (self.flowkey1 == '1'){
            // 办理人员是全员时
            self.flowShowAll = true
          }else {
            self.flowShowMultiple = true
          }
        } else {
          // flowkey2  判读1是多人，2是单人
          if (self.flowkey2 == '2') {
            self.flowShow = true
            self.$nextTick(_ => {
              self.$refs.peoplePicker.setValues([this.baseForm.person])
            })
          }
        }
      },
      /** 办理人员取消 */
      flowCancel() {
        this.flowShow = false
      },
      /**
       * 办理人员点确定按钮
       * @param  {[type]} e [description]
       * @return {[type]}   [description]
       */
      flowConfirm() {
        this.baseForm.person = this.$refs.peoplePicker.getValues()[0]
        this.flowShow = false
        this.searchValue = ''
      },
      /**
       * 多选人  改变事件
       * @return {[type]} [description]
       */
      multipleChange(e) {
        this.multipleResult = e
        // console.log(e)
      },
      /**
       * 办理人员多选 确认按钮
       * @return {[type]} [description]
       */
      flowConfirmMultiple() {
        this.baseForm.person = this.multipleResult.toString()
        // console.log(this.baseForm.person)
        this.flowShowMultiple = false
      },
      // 多选的办理人员
      multipletoggle(index) {
        this.$refs.checkboxes[index].toggle();
      },
      /**
       * 所有人员办理人  确认框
       * @return {[type]} [description]
       */
      flowAllConfirm() {
        this.flowShowALLId = this.$refs.flowChoose.getChoosed();
        this.flowShowALLValue = this.$refs.flowChoose.getChoosedByName();
        //人员去重
        let res = new Map();
        this.flowShowALLValue = this.flowShowALLValue.filter((item,index,array) => {
          return !res.has(item.id) && res.set(item.id, 1)
        })

        this.flowShowALLValue = this.flowShowALLValue.map(item => {
          return item.name
        });
        this.baseForm.person = this.flowShowALLValue.toString();
        this.flowShowAll = false;

      },
      /**
       * 树状办理人  清空
       */
      clearFlow() {
        this.flowShowALLId = []
        this.flowShowALLValue = []
        this.flowChangeTemp = []
        this.flowShowMore = false
      },
      /**
       * 树状办理人 在线选人 去重
       * @param  {[type]} e [description]
       * @return {[type]}   [description]
       */
      onlineFlowChanged(e) {
        //人员去重
        let res = new Map();
        this.flowChangeTemp = e.filter((item,index,array) => {
          return !res.has(item.id) && res.set(item.id, 1)
        })
      },
      // 催办
      toggle(index) {
        this.$refs.remind_checkboxes[index].toggle();
      },

      /**
       * 回退的时候选择对应的流程返回数据
       */
      getBackInfo() {
        let config = {
          method: "POST",
          url: `${this.$common.basePath}workclass.php`,
          data: {
            do: 'returnflow',
            fid: this.backValue,
            workid: this.status.workid
          }
        }
        this.$axios(config).then(res => {
          this.returnFlow = res.data
        }).catch(err => {
          console.log(err)
        })
      },

      /**
       * 回退确认弹框
       */
      backConfirm(e) {
        this.backValue = e.id
        this.getBackInfo()
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '是否确认回退至“'+ e.key +'”?'
        }).then(() => {
          // 取消遮罩
          this.$bridge.callHandler('cancelNavKeepView')
          // 取消全屏，还原头部文字内容
          this.$bridge.callHandler('cancelFullScreen',{title:'审批详情',right:'流程图'})
          this.backVisiable = false
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          // on confirm
          let returnData = {}
          returnData.view = 'returns',
          returnData.title = this.work.title
          returnData.workid = this.status.workid
          returnData.tplid = this.work.tplid
          returnData.typeid = '11'
          returnData.perid = this.status.perid
          returnData.flowid = this.status.flowid
          returnData.content = this.baseForm.message
          returnData.nextradio = 'on'
          returnData.returnfid = this.returnFlow.flowid
          returnData.returnpid = this.returnFlow.perid
          returnData.attachment = this.baseForm.attachment
          returnData.user_id = this.$store.state.userId
          returnData.do = "nextstep"
          returnData.currentsteps = this.currentStep
          let config = {
            method: "POST",
            url: `${this.$common.basePath}workclass.php`,
            data: returnData
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.opinionVisiable = false
            this.$toast({
              type: "success",
              message:'回退成功',
              forbidClick: true,
              duration: 1500
            })
            setTimeout(_ => {
              this.$toast({
                duration: 500,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
            },1500)
            setTimeout(_ => {
              // this.$router.push({name: "myApproval"})
              // this.getDetailInfo()
              // // 初始化全部的 data数据
              // Object.assign(this.$data, this.$options.data());
              // this.treeList()
              this.backMethod()
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
            },2100)
          }).catch(err => {
            console.log(err)
            this.$bridge.callHandler('navKeepView')
            this.$toast.clear()
            this.opinionVisiable = false
          })
          
        }).catch(() => {
          // on cancel
        });
      },
      /**
       * 回退取消
       * @return {[type]} [description]
       */
      backCancel() {
        this.backVisiable = false
        this.$bridge.callHandler('cancelNavKeepView')
      },

      /**
       * 意见框点击底部按钮事件
       * 回退，拒绝，同意三种情况
       * @return {[type]} [description]
       */
      clickNewNextBtn() {
        if(this.newBtnType == 3) {
          // 回退
          // 遮罩层
          this.$bridge.callHandler('navKeepView')
          this.backVisiable = true
        } else if (this.newBtnType == 2) {
          // 拒绝
          if (this.actf_type == '1') {
            // 会签人
            this.actfNext()
          } else {
            this.nextPostMethod()
          }
        } else if (this.newBtnType == 1) {
          if (this.actf_type == '1') {
            // 会签人点击同意
            this.actfNext()
          } else if (this.nextStepData.length == 0) {
            // 结束
            this.nextPostMethod()
          } else {
            // 遮罩层
            this.$bridge.callHandler('navKeepView')
            // 同意
            this.nextVisiable = true
          }
        } 
      },

      /**
       * 点击下一步检查签批内容
       */
      /*clickNext() {
        if (this.baseForm.approvalType == '委托' && this.baseForm.entrustId == '') {
          this.$toast("您当前选择了委托，请选择委托人！")
        } else if (this.baseForm.approvalType == '挂起' ) {
          this.$toast("您当前选择了挂起！")
        } else if (this.baseForm.approvalType == '会签') {
          this.$toast("您当前选择了会签，请选择会签人！")
        } else if (this.baseForm.approvalType == '拒绝') {
          this.$toast({
            message: "请稍后...",
            duration: 1000,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          setTimeout(_ => {
            this.nextPostMethod()
          },1000)
        } else {
          if (this.baseForm.approvalType == '') {
            this.$toast("请选择审批类型")
          } else if (this.baseForm.message.trim() == '') {
            this.$toast('请填写签批内容')
          } else {
            // 多人审批并且同时通过 将is_link隐藏掉
            if (this.baseForm.approvalType == '同意' && this.nextStepData.length > 0 
              && (this.status.appkey == '1' && this.status.appkey1 == '1')) {
              this.showLink = false
            }
            if (this.nextStepData.length <= 0){
              // 即为最后一步
              this.$toast({
                message: "请稍后...",
                duration: 1000,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
              setTimeout(_ => {
                this.nextPostMethod()
              },1000)
            }else {
              this.nextVisiable = true
            }
          }
        } 
      },*/
      /**
       * 取消下一步的弹出框
       * @return {[type]} [description]
       */
      nextStepCancel() {
        this.$bridge.callHandler('cancelNavKeepView')
        this.nextVisiable = false
      },
      /**
       * 审批下一步
       * @return {[type]} [description]
       * this.baseForm.approvalType : 1是同意 2是拒绝
       * this.nextStepData.length：为0就是最后一步了
       * status.appkey == '1' && status.appkey1 == '1'： 多人审批并且是同时通过
       */
      nextStepBtn() {
        if(this.newBtnType == 1 && this.nextStepData.length > 0 && !(this.status.appkey == '1' && this.status.appkey1 == '1') && this.nextStepValue == '') {
          this.$toast('请选择下一步流程设定')
        } else if (this.newBtnType == 1 && this.nextStepData.length > 0 && this.nextStepData.length > 0 && this.status.appkey == '1' && this.status.appkey1 == '1') {
          if (this.appkeyValue != '1' && this.baseForm.person == '') {
            // 多人审批同时通过 -- 最后一人办理
            this.$toast("请选择办理人员!")
          } else {
            this.nextPostMethod();
          }
        } else if (this.newBtnType == 1 && this.nextStepData.length > 0 && this.nextStepData.length > 0 && this.status.appkey == '1' && this.status.appkey1 == '2' && this.baseForm.person == '') {
          // 多人审批一人通过
          this.$toast("请选择办理人员!")
        } else if (this.newBtnType == 1 && this.nextStepData.length > 0 && this.nextStepData.length > 0 && this.status.appkey == '2' && this.status.appkey1 == '2' && this.baseForm.person == '') {
          // 单人审批
          this.$toast("请选择办理人员!")
        } else {
          this.$toast({
            duration: 1000,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          setTimeout(_ => {
            this.nextPostMethod()
          },1000)
        }
        
      },
      /**
       * 提交方法
       * @return {[type]} [description]
       */
      nextPostMethod () {
        let persons = this.baseForm.person.split(",")
        //人员去重
        let res = new Map();
        persons = persons.filter((item,index,array) => {
          return !res.has(item) && res.set(item, 1)
        })
        let msg = "是否将流程转交给 " + persons[0] + " ？"
        if (persons.length > 1) {
          if (persons.length > 3) {
            msg = "是否将流程转交给 " + persons[0] + " 等办理？"
          }else if (persons.length <=2 && persons.length > 1) {
            msg = "是否将流程转交给 " + persons[0]+','+persons[1]+ " 办理？"
          }else if (persons.length <=3 && persons.length > 1) {
            msg = "是否将流程转交给 " + persons[0]+','+persons[1]+ ',' +persons[2]+ " 办理？"
          }
        }

        // 多人审批多人同时通过
        if (this.appkeyValue == '1') {
          msg = "是否确认提交？"
        }

        if (this.nextCloseTitle == "结束") {
          msg = "是否确认提交？"
        }
        // 拒绝
        if (this.newBtnType == 2) {
          msg = "是否确认拒绝审批办理？"
        }
        // 遮罩层
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: msg
        }).then(() => {
          // 取消遮罩
          this.$bridge.callHandler('cancelNavKeepView')
          // 取消全屏，还原头部文字内容
          this.$bridge.callHandler('cancelFullScreen',{title:'审批详情',right:'流程图'})
          this.nextVisiable = false
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          // 表单可编辑时，执行保存表单
          if(this.editFlag == 1) {
            this.saveEditForm()
          }
          // on confirm
          let nextForm = {}
          nextForm.workid = this.status.workid
          nextForm.number = this.work.number
          nextForm.tplid = this.work.tplid
          nextForm.typeid = this.status.typeid
          nextForm.user_id = this.$store.state.userId
          nextForm.title = this.work.title
          nextForm.pertype = this.newBtnType //审批类型 1通过 2拒绝
          nextForm.nextradio = 'on';//固定
          nextForm.perid = this.status.perid
          nextForm.flowid =  this.status.flowid
          nextForm.content = this.baseForm.message
          // if (this.newBtnType == 1) {
          //   nextForm.content = this.baseForm.message?this.baseForm.message:'同意'
          // } else if (this.newBtnType == 2) {
          //   nextForm.content = this.baseForm.message?this.baseForm.message:'拒绝'
          // }
          nextForm.do = 'nextstep'
          nextForm.sms_box = '1' //推送消息
          //固定，多人审批的时候传appkey1
          if(this.status.appkey == '1' && this.status.appkey1 == '1'){
            // appkey  等于0是最后一个人审批    等于1是表示不是最后一个人审批
            if (this.appkeyValue == '0') {
              nextForm.view = 'appkey2'
            }else {
              nextForm.view = 'appkey1'
            }
          }else if (this.status.appkey == '1' && this.status.appkey1 == '2') {
            nextForm.view = 'appkey2'
          } else {
            nextForm.view = 'personnel'
          }
          nextForm.attachment = this.baseForm.attachment
          // 以下是flowPeopleData存的数据，后台需要的 -- 拒绝不要这些参数
          if (this.newBtnType == 1) {
            nextForm.nextflowid = this.flowPeopleData.fid
            nextForm.nextappkey = this.flowPeopleData.flowkey2
            nextForm.nextappkey1 = this.flowPeopleData.flowkey3
            nextForm.nextflowdatetype = this.flowPeopleData.flowdatetype
            nextForm.nextflowdate = this.flowPeopleData.flowdate
            nextForm.flownum = this.flowPeopleData.flownum

            nextForm.user = this.baseForm.person //下一步审批人员
            nextForm.currentsteps = this.currentStep
          }
          
          // 消息需要的参数
          if (this.nextCloseTitle == "结束") {
            nextForm.is_over = 1
          } else {
            nextForm.is_over = 0
          }
          let config = {
            method: "post",
            url: `${this.$common.basePath}workclass.php`,
            data: nextForm
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.opinionVisiable = false
            this.$toast({
              type: "success",
              message:'提交成功',
              forbidClick: true,
              duration: 1500
            })
            setTimeout(_ => {
              this.$toast({
                duration: 500,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
            },1500)
            setTimeout(_ => {
              // this.$router.push({name: "myApproval",query:{tab:2}})
              // this.$store.state.approvalBack = 'approvalBack'
              // this.getDetailInfo()
              // // 初始化全部的 data数据
              // Object.assign(this.$data, this.$options.data());
              // this.treeList()
              this.backMethod()
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
            },2100)
          }).catch(err => {
            console.log(err)
            let self = this;
            self.$toast.clear()
            self.opinionVisiable = false
            // 多人审批同时通过，通过参数判断刷新页面
            if (err.code == -454) {
              this.$toast({
                type: 'fail',
                message: '网络异常,请重新提交',
                forbidClick: true,
                overlay: true,
              })
              setTimeout(_ => {
                self.getDetailInfo();
              },2000)
            } else {
              this.$toast(err.msg)
            }
          })

        }).catch(() => {
          // on cancel
          // 如果下一步弹出框显示
          if(this.nextVisiable) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        });
      },
      /**
       * 表单可编辑时，保存表单内容
       * @return {[type]} [description]
       */
      saveEditForm() {
        let saveForm = this.$refs.forms.getFormData()
          saveForm.perid = this.status.perid;
          saveForm.flowid = this.status.flowid;
          saveForm.do = 'workadd'
          saveForm.workid = this.status.workid
          saveForm.tplid = this.tplData.tplid
          saveForm.typeid = this.tplData.typeid
          saveForm._typeid = this.tplData.typeid
          saveForm.user_id = this.$store.state.userId
        let config = {
          method: 'post',
          url: `${this.$common.basePath}workclass.php`,
          data: saveForm
        }
        this.$axios(config).then(res => {
          console.log('保存表单成功')
        }).catch(err => {
          console.log(err)
        })
      },
      /**
       * 会签人  下一步
       * @return {[type]} [description]
       */
      actfNext() {
        // 遮罩层
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: "提示",
          message: this.newBtnType == 1?"是否确认提交会签？":"是否确认拒绝会签？"
        }).then(res => {
          this.$bridge.callHandler('cancelNavKeepView')
          this.$bridge.callHandler('cancelFullScreen',{title:'审批详情',right:'流程图'})
          this.nextVisiable = false
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          // on confirm
          let nextForm = {}
          nextForm.workid = this.status.workid
          nextForm.number = this.work.number
          nextForm.tplid = this.work.tplid
          nextForm.typeid = this.status.typeid
          nextForm.user_id = this.$store.state.userId
          nextForm.title = this.work.title
          nextForm.pertype = this.newBtnType   //审批类型 1通过 2拒绝
          nextForm.nextradio = 'on';           //固定
          nextForm.perid = this.status.perid
          nextForm.flowid =  this.status.flowid
          nextForm.content = this.baseForm.message
          // if (this.newBtnType == 1) {
          //   nextForm.content = this.baseForm.message?this.baseForm.message:'同意'
          // } else if (this.newBtnType == 2) {
          //   nextForm.content = this.baseForm.message?this.baseForm.message:'拒绝'
          // }
          nextForm.do = 'nextstep'
          nextForm.sms_box = '1' //推送消息
          nextForm.view = 'countersign'
          nextForm.attachment = this.baseForm.attachment
          // 以下是flowPeopleData存的数据，后台需要的
          nextForm.nextflowid = this.flowPeopleData.fid
          nextForm.nextappkey = this.flowPeopleData.flowkey2
          nextForm.nextappkey1 = this.flowPeopleData.flowkey3
          nextForm.nextflowdatetype = this.flowPeopleData.flowdatetype
          nextForm.nextflowdate = this.flowPeopleData.flowdate
          nextForm.flownum = this.flowPeopleData.flownum
          nextForm.user = this.baseForm.person //下一步审批人员
          nextForm.currentsteps = this.currentStep

          let config = {
            method: "post",
            url: `${this.$common.basePath}workclass.php`,
            data: nextForm
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.opinionVisiable = false
            this.$toast({
              type: "success",
              message:'提交成功',
              forbidClick: true,
              duration: 1500
            })
            setTimeout(_ => {
              this.$toast({
                duration: 500,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
            },1500)
            setTimeout(_ => {
              // this.$router.push({name: "myApproval",query:{tab: 2}})
              // this.$store.state.approvalBack = 'approvalBack'
              // this.getDetailInfo()
              // // 初始化全部的 data数据
              // Object.assign(this.$data, this.$options.data());
              // this.treeList()
              this.backMethod()
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
            },2100)
          }).catch(err => {
            console.log(err)
            this.$toast.clear()
            this.opinionVisiable = false
          })
        }).catch(error => {
          this.$bridge.callHandler('cancelNavKeepView')
        })
      },
      /**
       * 催办弹框
       */
      reminder() {
        let signs = []
        // 筛选未办理的数据
        for (var i = 0; i < this.status.actf.length; i++) {
          if (this.status.actf[i].pertype == '0' || this.status.actf[i].pertype == "4") {
            signs.push(this.status.actf[i].name)
          }
        }
        // console.log(signs)
        if (signs && signs.length > 0) {
          this.reminderData = signs
        } else {
          // 委托人或主办人
          if (this.status.entrust) {
            this.reminderData = this.status.entrust.split(",")
          } else {
            // 没有委托人就取主办人
            if (this.status.query.length > 0) {
              // 多人
              let zhuban = []
              for (var i = 0; i < this.status.query.length; i++) {
                if (this.status.query[i].pertype == '0' || this.status.query[i].pertype == "4") {
                  zhuban.push(this.status.query[i].name)
                }
              }
              this.reminderData = zhuban
            }else {
              // 单人
              this.reminderData = this.status.name.split(",")
            }
          }
        }
        // console.log(this.reminderData)
        this.$bridge.callHandler('navKeepView')
        this.reminderVisiable = true
      },
      /**
       * 催办  取消
       * @return {[type]} [description]
       */
      reminderCancel() {
        this.$bridge.callHandler('cancelNavKeepView')
        this.reminderVisiable = false
      },
      /**
       * 催办
       */
      reminderConfirm() {
        // console.log(this.reminderCheck);
        let msg = '催办将会发短信提醒，是否确认？'
        if (this.reminderCheck.length <= 1 && this.reminderCheck.length > 0) {
          msg = '催办将会给 ' + this.reminderCheck[0] + ' 发短信提醒，是否确认？' 
        } else if (this.reminderCheck.length > 1 && this.reminderCheck.length <= 2) {
          msg = '催办将会给 ' + this.reminderCheck[0] + "," + this.reminderCheck[1] +'发短信提醒，是否确认？'
        } else if (this.reminderCheck.length > 1 && this.reminderCheck.length <= 3) {
          msg = '催办将会给 ' + this.reminderCheck[0] + "," + this.reminderCheck[1] + ',' + this.reminderCheck[2]+' 发短信提醒，是否确认？'
        } else if (this.reminderCheck.length > 3) {
          msg = '催办将会给 ' + this.reminderCheck[0] + ' 等发短信提醒，是否确认？' 
        }
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: msg
        }).then(() => {
          this.$bridge.callHandler("cancelNavKeepView")
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          let config = {
            method: "post",
            url: `${this.$common.basePath}workclass_msg.php`,
            data: {
              user_id: this.$store.state.userId,
              workid: this.$route.query.workid,
              names: this.reminderCheck,
              type: 1,    //1是流程，2是公文
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear();
            this.$toast.success('短信发送成功')
            this.reminderVisiable = false
            this.$bridge.callHandler("cancelNavKeepView")
          }).catch(err => {
            this.$toast.clear();
            this.$toast.fail(err.msg)
            this.reminderVisiable = false
            this.$bridge.callHandler("cancelNavKeepView")
          })
        }).catch(() => {
          this.$bridge.callHandler('navKeepView')
        })
      },
      /**
       * 附件删除
       * @return {[type]} [description]
       */
      deleteFile(index) {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '是否确认删除该文件？'
        }).then(() => {
          this.$bridge.callHandler("cancelNavKeepView")
          // on confirm
          this.baseForm.attachment.splice(index, 1)
        }).catch(() => {
          // on cancel
          this.$bridge.callHandler('cancelNavKeepView')
        });
      },
      /**
       * 点击搜索 过滤选项 
       * @param  {[type]} e [description]
       * @return {[type]}   [description]
       */
      onSearch(tempPopupField) {
        let result = this.newflowuser.filter(item => {
          return item.indexOf(this.searchValue) != -1
        })
        this.resultData = result
      },
      /**
       * 预览-流程附件
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      previewComFile(item,filename) {
        // console.log(item+filename)
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${item}`,
          fileName: filename
        })
        window.open(`${this.$common.filePath}${item}?filename=${filename}`)
      },
      /**
       * 点击预览附件
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      previewFile(item) {
        // console.log(item)
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${item}`,
          fileName:  this.fileName(item, 'fullName') || item
        })
        window.open(`${this.$common.filePath}${item}?filename=${this.fileName(item, 'fullName')}`)
      },
      /**
       * 预览--图片
       */
      imgPreview(target,index) {
        this.imgPreviewData = target.map(item => {
          return this.$common.filePath + item
        })
        this.position = index
        this.imgShow = true
      },
      /**
       * 删除
       * @return {[type]} [description]
       */
      recoverDelete () {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title:'警告',
          message: '是否确认删除该流程？'
        }).then(() => {
          this.$bridge.callHandler("cancelNavKeepView")
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          let config = {
            method: "post",
            url: `${this.$common.basePath}workclass.php`,
            data: {
              do: "delete",
              user_id: this.$store.state.userId,
              workid: this.work.id
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$toast({
              type:'success',
              message:'删除成功',
              forbidClick: true,
              duration: 1500
            })
            setTimeout(_ => {
              this.$toast({
                duration: 500,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
            },1500)
            setTimeout(_ => {
              this.backMethod()
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
              // this.$router.push({name: "myApproval",query:{fresh:'fresh'}})
            },2000)
          }).catch(err => {
            this.$toast.clear()
            this.$toast.fail(err.msg)
          })
        }).catch(() => {
          this.$bridge.callHandler('cancelNavKeepView')
        })
      },
      /**
       * 全选
       * @return {[type]} [description]
       */
      checkAll() {
        this.$refs.userCheckGroup.toggleAll(true);
      },
      /**
       * 反选
       * @return {[type]} [description]
       */
      toggleAll() {
        this.$refs.userCheckGroup.toggleAll();
      },
      /**
       * 添加常用语
       * @return {[type]} [description]
       */
      adduserfulMethod(e) {
        // console.log(e)
        if (e) {
          let config = {
            method: "post",
            url: `${this.$common.basePath}aatp5/public/index.php/phrase/phrase/phrase_add`,
            data: {
              uid: this.$store.state.userId,
              type: 1,            // 1是审批 2是公文
              phrase: this.baseForm.message
            }
          }
          this.$axios(config).then(res => {
            // console.log(res.msg)
            this.getUsefulData()
          }).catch(err => {
            console.log(err.msg)
          })
        }
      },
      /**
       * 获取常用语列表
       * @return {[type]} [description]
       */
      getUsefulData() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}aatp5/public/index.php/phrase/phrase/phrase_list`,
          data: {
            uid: this.$store.state.userId,
            type: 1             // 1是审批 2是公文
          }
        }
        this.$axios(config).then(res => {
          this.usefulData = res.data
        }).catch(err => {
          console.log(err.msg)
        })
      },
      /**
       * 常用语选择
       * @return {[type]} [description]
       */
      choseUseful(item) {
        this.baseForm.message = item.phrase;
        this.userfulShow = false;
        // 切换常用语后取消勾选
        this.addUseful = false
      },
      /**
       * 常用语关闭弹框
       * @return {[type]} [description]
       */
      closeUseful() {
        this.$bridge.callHandler('cancelNavKeepView')
        this.userfulShow = false
      },
      /**
       * 常用语删除
       * @return {[type]} [description]
       */
      deleteUseful(item) {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '是否确认删除该常用语？'
        }).then(() => {
          this.$bridge.callHandler('navKeepView')
          let config = {
            method: 'post',
            url: `${this.$common.basePath}aatp5/public/index.php/phrase/phrase/phrase_del`,
            data: {
              uid: this.$store.state.userId,
              id: item.id
            }
          }
          this.$axios(config).then(res => {
            this.$toast({
              type: 'success',
              message: '删除成功',
              forbidClick: true
            })
            this.addUseful = false
            this.getUsefulData()
          }).catch(err => {
            console.log(err)
          })
        }).catch(() => {
          this.$bridge.callHandler('navKeepView')
        })
      },
      /**
       * 返回样式类名
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      getTypeclass(type) {
        let typeclass = ''
        switch(type) {
          case '0'://办理中
            typeclass = 'ing-color'
            break;
          case '1'://通过
            typeclass = 'pass-color'
            break;
          case '2'://拒绝
            typeclass = 'defined-color'
            break;
          case '3'://退回
            typeclass = 'defined-color'
            break;
          case '4'://等待办理中
            typeclass = 'ing-color'
            break;
          case '5'://结束
            typeclass = 'defined-color'
            break;
          case '7'://多人审批单人通过
            typeclass = 'pass-color'
            break;
          case 7://多人审批单人通过
            typeclass = 'pass-color'
            break;
          default:
            typeclass = 'defined-color'
        }
        return typeclass;
      },
      getTypename(type) {
        let typename = ""
        switch(type) {
          case '0':
            typename = '办理中'
            break;
          case '1':
            typename = '通过'
            break;
          case '2':
            typename = '拒绝'
            break;
          case '3':
            typename = '退回'
            break;
          case '4':
            typename = '等待办理中'
            break;
          case '5'://结束
            typename = '结束'
            break;
          case '7'://多人审批单人通过
            typename = '无需办理'
            break;
          case 7://多人审批单人通过
            typename = '无需办理'
            break;
          default:
            typename = '结束'
        }
        return typename;
      },
      /**
       * 计算总和列的值 得出总值
       * @param  {Object} tableItem 表格对象(具体数据为 tableItem.table)
       * @return {Number}           计算总额结果
       */
      returnTotal(tableItem) {
        let result = null
        let target = []
        tableItem.table.forEach(item => {
          if(item.product == '3') {
            target = item.inputvalue
          }
        })
        result = target.reduce((total, curr) => {
          return ( parseInt(total) || 0) + ( parseInt(curr) || 0)
        }, 0)
        return parseInt(result)
      },
    }
  }
</script>
<style type="text/css" lang="less" scoped>
.padding-12 {
    padding-top: 12px;
    padding-bottom:12px;
  }
  .padding-15 {
    padding-top: 15px;
    padding-bottom:15px;
  }
  .height_100 {
    height: 100vh;
  }
  .font-size14 {
    font-size: 14px;
  }
  .font-color6 {
    color: #666666
  }
  .font-color3 {
    color: #333333
  } 
  .padding-b-54 {
    padding-bottom: 55px;
  }
  .nav-content {
    height: 100vh;
    -webkit-overflow-scrolling: touch;
  }
  .nav-content-height {
    height: calc(100vh - 54px);
    -webkit-overflow-scrolling: touch;
  }
  .margin-b-12 {
    margin-bottom: 12px;
  }
  .margin-l-15 {
    margin-left: 15px;
  }
  .margin-r-10 {
    margin-right: 10px;
  }
  .margin-b-15 {
    margin-bottom: 15px;
  }
  .padding-tb-10:first-child {
    padding-top: 10px;
  }
  .padding-tb-10:last-child {
    padding-bottom: 10px;
  }
  .file-t-10 {
    padding-bottom: 10px;
  }
  .file-t-10:last-child{
    padding-bottom: 0;
  }
  .m10 {
    margin-bottom: 10px;
  }
  .normal-flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  } 
  .form-detail-class{
    margin-top: 12px;
  }
  // 显示已撤销--start
  .flex-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .font-color {
      font-weight: bold;
      color: #F5A703;
    }
  }
  // 显示已撤销--end
  .head-info {
    background-color: #fff;
    padding: 15px;
    width: calc(100vw - 30px);
  }
  .all-head-img {
    width: 46px;
    height: 46px;
    border-radius: 4px;
  }
  .head-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .head-title{
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 5px;
    width: 100%;
  }
  .head-desc {
    color: #999999;
    font-size: 12px;
  }
  .margin-tb {
    margin-top: 10px;
  }
  .cell-left {
    color: #999999;
    font-size: 15px;
    max-width: 63px;
    text-align: right;
    padding-right: 15px;
    line-height: 18px;
    // display: flex;
    // align-items:center;
    // justify-content: flex-end;
  }
  .cell-right {
    text-align: left;
    color: #333333;
    font-size: 15px;
    line-height: 18px;
  }
  .group-class {
    margin-top: 10px;
    background-color: #F5F5F5;
  }
  .left-class {
    max-width: 90px;
    font-weight: bold;
  }
  .radio-inline-class {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
  }
  // 表单附件
  .form-file {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .form-file-name {
    display: inline-block;
    width: 100%;
  }
  // 表单图片
  .form-img {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    margin-right: 20px;
  }
  .form-img-mask {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 35;
    float: right;
    margin-left: -70px;
    color: #fff;
    line-height: 50px;
    text-align: center;
  }
  // 附件样式开始
  .file-class {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 0;
  }
  .img-class {
    width: 20px;
    height: 23px;
    margin-right: 10px;
  }
  .name-width {
    max-width: calc(100% - 70px);
    min-width: calc(100% - 70px);
  }
  p {
    margin: 0
  }
  .margin-l-20 {
    margin-left: 20px;
  }
  // 附件样式结束
  // 下一步流程设定 样式开始
  .container-class {
    padding: 15px ;
    background-color: #fff;
    margin-top: 12px;

    p {
      margin-top: 0;
      margin-bottom: 19px;
      font-weight: bold;
      font-size: 17px;
    }
    // 单选的
    .van-radio:first-child {
      margin-bottom: 15px;
    }
    // 复选的
    .van-checkbox:first-child {
      margin-bottom: 15px;
    }
  }
  // 下一步流程设定 样式结束
  .progress {
    margin-top: 20px;
    margin-left: 15px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #999999;
  }
  // 底部按钮
  .bottom-btns {
    padding: 2px 15px;
    width: calc(100vw - 30px);
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 5;
  }
  .edit-bottom-btns {
    padding: 4px 15px;
    width: calc(100vw - 30px);
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 5;
    border-top: 1px solid rgba(0, 0, 0, 0.14);
  }
  .default-btn-calss {
    border: none;
    color: #2E79FF;
  }
  // 弹出框
  .bottom-btn {
    padding: 3px 15px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    width: calc(100vw - 30px)
  }
  .default-class {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1989fa;
    margin: 10px 0px;
    font-size: 17px;
  }
  .info-class{
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #2E79FF;
    border-radius: 5px!important;
    background-color: #2E79FF;
    color: #fff;
  }
  .default-btn-class{
    border: none;
    color: #2E79FF;
    font-size: 17px;
  }
  .info-btn-class {
    font-size: 17px;
  }
  .span-calss {
    width: 43%;
  }
  //表格
  .table-area {
    background-color: #fff;
    margin-top: 10px;
  }
  .table-wrap {
      display: flex;
      max-width: 100vw;
      padding: 0 0 2px 2px;
      overflow-x: scroll;
      background: #e1ecff;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      .table-col {
        padding-right: 3px;
      }
      .table-header {
        display: inline-block;
        width: 45vw;
        padding: 12px;
        font-weight: bold;
      }
      .table-input-wrap {
        input {
          width: 45vw;
          padding: 12px;
          box-shadow:none; /*去除阴影*/
          outline: none;/*聚焦input的蓝色边框*/
          resize: none; /*textarea 禁止拖拽*/
          border: 1px solid #f5f5f5; /*去除边框*/
          border-radius: 0;
          -webkit-appearance: none;/*常用于IOS下移除原生样式*/
          -webkit-tap-highlight-color: rgba(0,0,0,0); /*点击高亮的颜色*/
        }
      }
    }
    // 回退弹框
    .back-info {
      color: #999999;
      font-size: 14px;
      padding-top: 15px;
      padding-left: 20px;
    }
    .back-panel {
      padding: 30px 20px;
    }
    .next-row-class {
      max-height: 22px;
      height: 22px;
      padding: 15px;
      width: calc(100vw - 30px);
      border-bottom: 1px solid #F5F5F5;
    }
    .next-position-fixed {
      position: fixed;
      background-color: #fff;
      z-index: 6;
    }
    .row-cancel {
      font-size: 17px;
      color: #333333
    }
    .row-title{
      font-size: 17px;
      color: #333333;
      font-weight: bold;
      text-align: center;
    }
    .row-confirm {
      font-size: 17px;
      color: #2E79FF;
      text-align: right;
    }
    .next-left-class {
      max-width: 130px;
      font-size: 17px;
      font-weight: bold;
    }
    .person-right-class {
      // max-height: 140px;
      overflow-y: scroll;
    }
    .van-popup-height{
      height: 315px;
    }
    .margin-b-30 {
      margin-bottom: 30px;
    }
    .next-step-class{
      width: 100vw;
      bottom: 0;
      top: 53%;
      padding-bottom: 0;
    }
    .line-class {
      line-height: 36px!important;
      padding: 5px 15px!important;
    }
    .line-class:after {
      border-bottom: none;
    }
    .margin-b-10 {
      margin-bottom: 12px;
    }
    .margin-t-10{
      margin-top: 12px;
    }
    .close-form {
      line-height: 20px;
      padding-top: 8px;
      padding-bottom:2px;
    }
    // 上拉菜单
  .van-action-sheet {
    background-color: transparent;
    color: #333333;
    overflow-y: hidden;

    .van-action-sheet__name {
      font-size: 17px;
    }

    button {
      padding: 0 6px;
    }

    .van-hairline--top::after {
      border-top-width: inherit;
    }
  }
  .last-action-class {
    border-radius: 0 0 8px 8px;
  }
  .cancel-action-class {
    margin-top: 10px;
    border-radius: 8px 8px 0 0;
  }
  // 审批类型
  .approval-class {
    .van-cell {
      // margin-bottom: 12px;
      padding: 5px 15px!important;
    }
    .van-cell__right-icon {
      line-height: 28px;
    }
    .van-cell__title {
      // font-weight: bold;
    }
    .value-right {

    }
  }
  .border-none {
    border: none;
  }

  .classMoreSign {
    position: fixed;
    bottom: 9vh;
    background: #fff;
    width: calc(100vw - 30px);
    padding-left: 15px;
    padding-right: 15px;
    margin-left: -15px;
    border-top: 1px solid #f5f5f5;
  }
  .more-class:after {
    content: '、'
  }
  .more-class:last-child::after{
    content: ' '
  }
  .flow-img {
    z-index: 3;
    display: inline-block;
    position:absolute;
    left:0px;
    top:0px;

    img{
      z-index:5;
      width: 40px;
      height: 40px;
    }
    .process-img {
      z-index:5;
      width: 40px;
      height: 40px;
    }
    .process-border-img {
      z-index:5;
      width: 36px;
      height: 36px;
      border: 2px solid #fff;
    }
  }

  // 优化页面css 2020/3/18
  .new_bottom_btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .span_text {
      font-size: 12px;
      color: #333333;
    }
  }
  .btn_icon {
      width: 20px;
      height: 20px;
      margin: 3px 1px;
    }
  .new_cells_group {
    .van-cell {
      padding: 6px 15px 1px 15px;
    }
    .label-right{
      font-size: 14px;
      color: #333333;
    }
    .more-btn{
      color: #2E79FF;
      font-size: 14px;
    }
    
    .new_add_btn {
      border: 1px solid #E0E0E0;
      color: #E0E0E0;
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      font-size: 16px;
    }
    .new_tag_class {
      padding:  0 15px 15px 15px;
      border-bottom: 1px solid #F5F5F5;
    }
    .new_tags {
      width: 50px;
      height: 50px;
      position: relative;
    }
    .new_tag_img {
      width: 50px;
      height: 50px;
    }
    .new_mask {
      position: absolute;
      top: 0%;
      height: 50px;
      width: 50px;
      border-radius: 4px;
      background: rgba(51, 51, 51, 0.6);
    }
    .new_tag_text {
      position: absolute;
      top: 32%;
      font-size: 12px;
      width: 50px;
      text-align: center;
      color: #fff;
    }
  }
  .new_uploadler {
    margin: 15px 15px 10px 15px;
  }
  .new_clip {
    width: 17px;
    height: 17px;
  }
  .clip_text {
    font-size: 17px;
    color: #2E79FF;
    margin-left: 4px;
  }
  .opinion_fixed {
    position: fixed;
    width: 100vw;
  }
  .new_panel_scroll {
    // padding-top: 46px;
    // padding-bottom: 64px;

    .van-cell:not(:last-child)::after {
      border-bottom: none;
    }
  }
  .new_panel_btn {
    position: fixed;
    bottom: 0;
    padding: 10px 15px 4px 15px;
    width: calc(100vw - 30px);
    background-color: #fff;
  }
  .new_file_class {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 15px;
  }
  // 优化的页面css-end；
  .checkboxes-btn {
    position: fixed;
    bottom: 0;
    width: calc(100vw - 30px);
    padding: 2px 15px;
    border-top: 1px solid #ebedf0;
    background-color: #fff;
  }
  .bottom-btn-all {
    padding: 3px 15px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    width: calc(100vw - 30px);
    position: fixed;
    bottom: 0;
  }
</style>
<style type="text/css" lang="less">
  #appro-info {
    .padding-tb-10 {
      .van-cell {
        padding: 5px 15px;
        line-height: 20px!important;
      }
    }
    .van-cell {
      // padding: 2px 15px ;

      .van-field__body {
        color: #999999;
      }
    }
    .van-cell__right-icon {
      line-height: 33px;
      height: 33px;
    }
    .van-radio:first-child{
      margin-right: 40px;
    }
    .field-left-class {
      // font-weight: bold;
      // margin-bottom: 10px;
    }
    // 上传按钮样式开始
    .van-uploader__upload {
      width: 50px;
      height: 50px;
      background-color: #F5F5F5;
      border: 1px solid #F5F5F5;
    }
    // 上传按钮样式结束
    
    // picker
    .van-picker__toolbar {
      height: 52px;
      line-height: 52px;
      .van-picker__cancel {
        color: #333333;
        font-size: 17px;
      }
      .van-picker__title {
        font-weight: bold;
        font-size: 17px;
      }
      .van-picker__confirm {
        font-size: 17px;
      }
    }

    // 表格宽度
    .table-wrap {
      .table-header {
        min-width: 25vw;
        width: 25vw;
      }
      .table-input-wrap {
        width: 25vw;
        
        input {
          width: 25vw;
          
        }
      }
    }
    .multiple-alluser {
      // height: 78vh;

      .next-row-class {
        position:fixed;
        background-color: #fff;
        z-index: 9;
      }

      .van-search {
        padding-top: 63px;
      }
    }
    // 多人审批办理人员
    .multiple-user {
      max-height: 80vh;
      min-height: 40vh;

      .next-row-class {
        position:fixed;
        background-color: #fff;
        z-index: 9;
      }

    }

    // 修改button默认颜色
    .van-button--default {
      border: none;
      font-size: 17px;
    }

    .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
      border: none;
    }

    .new_default_btn {
      height: 46px;
      border: 1px solid #2E79FF;
      color: #2E79FF!important;
      border-radius: 4px 0 0 4px;
      line-height: 46px;
      font-size: 14px;
    }
    .new_info_btn {
      height: 46px;
      line-height: 46px;
      border-radius: 4px;
      color: #fff!important;
      font-size: 14px;
    }

    .next_radio_class {
      .van-cell {
        padding: 1px 15px;
      }

      &:after{
        border-bottom: 1px solid #ebedf0;
      }
    }

  }
</style>